提问者:小点点

在FormBuilder中使用两个参数的angular中的验证器总是以“无法读取属性”Company Form“of Undefined”的错误结束


我试图使验证器的密码和确认密码,但我总是结束这个错误推拿:

ERROR TypeError: Cannot read property 'companyForm' of undefined
    at checkPassword (add-company.component.ts:49)
    at forms.js:1599
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:1595)
    at FormControl.validator (forms.js:1537)
    at FormControl._runValidator (forms.js:4347)
    at FormControl.updateValueAndValidity (forms.js:4308)
    at new FormControl (forms.js:4920)
    at FormBuilder.control (forms.js:9481)
    at FormBuilder._createControl (forms.js:9541)

我试着在网上寻找这个问题,我发现其他人也面临同样的问题,当我尝试他们得到的解决方案时,我仍然不适合我。

add-company.components.ts:

import {Component, Input, OnInit} from '@angular/core';
import {AdminService} from "../../../service/admin.service";
import {LoginService} from "../../../service/login.service";
import {AbstractControl, FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Company} from "../../../models/company";

@Component({
  selector: 'app-add-company',
  templateUrl: './add-company.component.html',
  styleUrls: ['./add-company.component.css']
})
export class AddCompanyComponent implements OnInit {

  allowed:boolean;
  companyForm:FormGroup;
  companies: Company[];
  constructor(private adminService: AdminService, private loginService:LoginService, private fb: FormBuilder) { }

  ngOnInit(): void {
    this.companyForm = this.fb.group({
      name:["", [Validators.required]],
      email:["", [Validators.required,Validators.email]],
      password:["", [Validators.required]],
      passwordConfirm:["",[Validators.required, this.checkPassword]]
    });

    this.adminService.getAllCompanies(sessionStorage.token).subscribe(
      (companies)=>{
        for (let i = 0; i < companies.length; i++){
          this.companies = companies;
        }
      }
    );

    if(sessionStorage.token != undefined){
      this.loginService.identityCheck(sessionStorage.token).subscribe(
        (identity)=>{
          if(identity == "admin"){
            this.allowed = true
          }else{
            this.allowed = false;
          }
        }
      );
    }
  }

  checkPassword(){
      if(this.companyForm.controls['password'].value !=
        this.companyForm.controls['passwordConfirm'].value){
        this.companyForm.controls['passwordConfirm'].setErrors({passwordMismatch : true});
      }
  }


  addCompany(){
  if(this.companyForm.invalid){
    return;
    }

  let newCompany: Company = new Company(0,
    this.companyForm.controls['name'].value,
    this.companyForm.controls['email'].value,
    this.companyForm.controls['password'].value,[]
    );

  this.adminService.addCompany(sessionStorage.token,newCompany).subscribe(
    (success)=>{
      alert(success)
    },
    (err)=>{
      alert(err.error)
    }
  )
  }

}

add-company.components.html:

<div *ngIf="allowed">

  <mat-horizontal-stepper>

    <mat-step [stepControl]="companyForm">
      <form [formGroup]="companyForm">
        <ng-template matStepLabel>Fill out the company name</ng-template>
        <mat-form-field>
          <mat-label>Company Name</mat-label>
          <input type="text" matInput placeholder="company name" formControlName="name" />
<!--          <mat-error *ngIf="allowed"> error</mat-error>-->
<!--          <mat-error *ngIf="companyForm.controls['name'].value == 'h'">err</mat-error>-->
        </mat-form-field>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>

    <mat-step [stepControl]="companyForm">
      <form [formGroup]="companyForm">
        <ng-template matStepLabel>Fill out email and password</ng-template>
        <mat-form-field>
          <mat-label>Email Address</mat-label>
          <input type="email" matInput placeholder="enter company email address" formControlName="email" required />
        </mat-form-field>
        <br/>
        <mat-form-field>
          <mat-label>Password</mat-label>
          <input type="password" matInput placeholder="enter company password" formControlName="password" />
        </mat-form-field>
        <br/>
        <mat-form-field>
          <mat-label>confirm Password</mat-label>
          <input type="password" matInput placeholder="confirm password" formControlName="passwordConfirm"  required />
          <mat-error *ngIf="companyForm.controls['passwordConfirm'].invalid
          && !companyForm.controls['passwordConfirm'].hasError('required')"
          >confirm Password</mat-error>
        </mat-form-field>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
      </form>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      <p>You are now done, here are the company details please check before registering</p>
      <p><b>company name:</b> {{companyForm.controls['name'].value}}</p>
      <p><b>company email address:</b> {{companyForm.controls['email'].value}}</p>
      <p><b>company password:</b> {{companyForm.controls['password'].value}}</p>

      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button (click)="addCompany()" >Register</button>
      </div>
    </mat-step>

  </mat-horizontal-stepper>

</div>


<div *ngIf="!allowed">you are not allowed to view this section..</div>

谢谢所有的帮助!


共1个答案

匿名用户

丢失。 试试看

passwordConfirm:["",[Validators.required, () => this.checkPassword()]]

使用此代码关键字将引用您的组件实例