Angular2表单验证

Question

Goal is to compare two password field to check whether they are identical:

<form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)">

  <ion-label floating>password</ion-label>
  <ion-input type="password" [ngFormControl]="password1" id="password1"></ion-input>

  <ion-label floating>Repeat password</ion-label>
  <ion-input type="password" [ngFormControl]="password2" id="password2"></ion-input>

  <div *ngIf="!myForm.valid">
    <p *ngIf="myForm.errors.areEqual">
     The two passwords do not match 
    </p>
  </div>

  <button type="submit" [disabled]="!myForm.valid">Next</button>
</form>

The class is setup as below:

  export class SignupPage3 {
  myForm: ControlGroup;
  password1: AbstractControl;
  password2: AbstractControl;

  constructor(public nav: NavController, fb: FormBuilder,private signupData: SignupDataService) {

    this.myForm = fb.group({
      'password1': ['', Validators.required],
      'password2': ['', Validators.required]
    }, {validator: this.areEqual});

    this.password1 = this.myForm.controls['password1'];
    this.password2 = this.myForm.controls['password2'];
  }

  areEqual(group: ControlGroup) {

    let password1 = group.controls.password1;
    let password2 = group.controls.password2;

    if (password1.value === password2.value) {
      return null;
    } else {
      return  { "areEqual": true};
    }
  }
}

When the class is loaded i get this error:

ORIGINAL EXCEPTION: TypeError: Cannot read property 'areEqual' of null

Answer 1

I would use the Elvis operator for this:

<div *ngIf="!myForm.valid">
  <p *ngIf="myForm.errors?.areEqual"> <-----
    The two passwords do not match 
  </p>
</div>