添加条件以进行表单验证

debugcn 发表于 Dev

Skydev

我正在尝试向表单添加条件。基本上，如果勾选了复选框，我只想将某些字段设置为必填。这是我的代码。

  onCreateContactDetailsForm() {
    this.contactDetailsForm = new FormGroup({
      firstName: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
      mobileNumber: new FormControl(null, [Validators.required, Validators.pattern('^([0|\+[0-9]{1,5})?([1-9][0-9]{8}|[1-9][0-9]{9})$')]),
      surname: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
      workEmail: new FormControl(null, [Validators.email]),
      identityValue: new FormControl('', [Validators.required]),
      personalEmail: new FormControl(null, [Validators.email]),
      exitDate: new FormControl('', [Validators.required]),
      exitNoticeDate: new FormControl('', [Validators.required]),
      amount: new FormControl('', [Validators.pattern('^$|^[0-9]*$')]),
      dateOfBirth: new FormControl('', [Validators.required]),
      indebtedToEmployer: new FormControl(false),
      isHrEmailAddress: new FormControl(false),
      if(isHrEmailAddress) {
        address1: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
        address2: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
        address3: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
        postalCode: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
        postalCountry: new FormControl(null, [Validators.required, Validators.pattern('^[a-zA-Z\- ]*$')]),
      }
    });
  }

if语句似乎不能放在这里，因为它在我的编辑器中给出了此错误 Type '(isHrEmailAddress: any) => void' is missing the following properties from type 'AbstractControl': validator, asyncValidator, _parent, _asyncValidationSubscription, and 44 more.

有没有更简单的方法可以做到这一点？

Chellappan w

Angular FormGroup API具有addControl方法，我们可以使用它来动态添加FormControl。

使用isHrEmailAddress控件的valueChanges方法侦听是否已选中isHrEmailAddress复选框。

component.ts

constructor() {
    this.onCreateContactDetailsForm();
     this.addControls(this.isHrEmailAddressControl.value);
    this.isHrEmailAddressControl.valueChanges.subscribe(isHrEmailAddress => {
      this.addControls(isHrEmailAddress);
    });
  }

  addControls(isHrEmailAddress) {
    const controls = {
      address1: new FormControl(null, [
        Validators.required,
        Validators.pattern("^[a-zA-Z- ]*$")
      ]),
      address2: new FormControl(null, [
        Validators.required,
        Validators.pattern("^[a-zA-Z- ]*$")
      ]),
      address3: new FormControl(null, [
        Validators.required,
        Validators.pattern("^[a-zA-Z- ]*$")
      ]),
      postalCode: new FormControl(null, [
        Validators.required,
        Validators.pattern("^[a-zA-Z- ]*$")
      ]),
      postalCountry: new FormControl(null, [
        Validators.required,
        Validators.pattern("^[a-zA-Z- ]*$")
      ])
    };
    if (isHrEmailAddress) {
      Object.keys(controls).forEach(key => {
        this.contactDetailsForm.addControl(key, controls[key]);
      });
    } else {
      Object.keys(controls).forEach(key => {
        this.contactDetailsForm.removeControl(key);
      });
    }
  }

component.html

<form [formGroup]="contactDetailsForm">
    <input type="text" formControlName="firstName">
    <hr>
    <input type="checkbox" formControlName="isHrEmailAddress">
    <hr>
    <div *ngIf="isHrEmailAddressControl.value">
        <input type="text" formControlName="address1">
  </div>
</form>

例

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。