Angular 动态表单验证 - 或者自定义验证

Question

我需要编写自定义验证，

如果国籍是 1，则护照是强制性的 - 这已经完成了。
如果国籍是 2，则 civilId 或护照号码是必填项 - 需要解决此问题

第2点我该如何实现。

因此该错误消息应显示在 html 中，如下所示

<span *ngIf="form.get('passportNo').errors" class="tooltiptext">{{' passportNo is required'}}</span>

this.form = this.fb.group({
      civilId: [""],
      nationality: [""]
      passportNo: [""],

})

  setExpatValidators() {
    const passportNo = this.form.get('passportNo');
    this.form.get('nationality').valueChanges
    .subscribe(nationality => {
          if(nationality ==  1){
        passportNo.setValidators([Validators.required]);
      }
  });
 }

submitForm(){
 if (!this.form.valid) {
 return;
}

如果有其他方法建议

Answer 1

您可以为表单组添加自定义验证器：

ngOnInit() {
  this.form = this.fb.group({
    civilId: [""],
    nationality: [""],
    passportNo: [""]
  });
  this.form.setValidators(this.formValidator());
}

formValidator(): ValidatorFn {
  return (group: FormGroup): ValidationErrors => {
    const nationality = group.controls.nationality;
    const passportNo = group.controls.passportNo;
    const civilId = group.controls.civilId;
    let errors = null;

    if (nationality.value === 1 && !passportNo.value) {
      errors = { passportNoRequired: true };
    }
    if (nationality.value === 2 && !passportNo.value && !civilId.value) {
      errors = { passportNoOrCivilIdRequired: true };
    }
    return errors;
  };
}

并再次验证您的表单：

<span *ngIf="form.errors && form.errors.passportNoOrCivilIdRequired" class="tooltiptext">passportNo or Civil Id is required</span>

工作演示

https://stackblitz.com/edit/form-validations-ng?file=src%2Fapp%2Fform1%2Fform1.component.ts

Angular 动态表单验证 - 或者自定义验证

Angular Dynamic Form Validations - Either or custom validation

javascript

typescript

angular8