Добавить условие для проверки формы

Question

Я пытаюсь добавить условие в свою форму. В основном я хочу сделать некоторые поля обязательными, только если установлен флажок. Вот мой код.

  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.

Есть ли более простой способ сделать это ?

Answer 1

Angular FormGroup API имеет метод addControl, мы можем использовать его для динамического добавления FormControl.

Используйте isHrEmailAddress control 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>

Пример

Answer 2

Возможный способ сделать это - добавить настраиваемый валидатор в элементы управления формы, например:

Метод 1

    let myRequiredValidator = (input: FormControl) =>{
        if(this.contactDetailsForm.getRawValue().isHrEmailAddress){
            const fieldInput = input.value;
            return fieldInput && fieldInput != "" ? null : { isRequiredAndEmpty: true };
        }
        return null;
    }

А затем добавить его в ваш массив валидатора следующим образом:

[myRequiredValidator, Validators.pattern('^[a-zA-Z\- ]*$')]

Это будет проверять значение, которое вы пытаетесь установить, и позволять ему проходить или терпеть неудачу.

Но есть другой способ сделать это путем добавления и удаления элементов управления в FormGroup

Метод 2

Когда вы измените свое значение, вы можете запустить это, чтобы добавить элементы управления в группу:

this.contactDetailsForm.addControl('new', new FormControl('', Validators.required));

Вы можете сделать это для каждого элемента управления, который вам нужен, просто замените «новый» на желаемое имя. И вы можете отменить это, выполнив это:

this.contactDetailsForm.removeControl('new', null);

При этом ваш дополнительный элемент управления будет удален из группы. Вы можете добавить / удалить это по мере необходимости.

Вот документация FormGroup, если что-то появится. Надеюсь, это достаточно полезно.