Angular 8, как пропустить проверку для текстового поля, которое не видно

Question

<form [formGroup]="userForm"  >
   <div class="form-group" *ngIf="isHidden">
    <label for="firstName">First Name</label>
    <input class="form-control" name="firstName" id="firstName" type="text" formControlName="firstName">
  </div>
  <button type="submit" class="btn btn-default" [disabled]="!userForm.valid">Submit</button>
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isHidden:boolean=false;
  title = 'Children';
  userForm: FormGroup;
  user: any = {
    firstName: ''

  };
  constructor(private formBuilder: FormBuilder) {

    this.userForm = this.formBuilder.group({
      'firstName': [this.user.firstName, [Validators.required]]
    });
  }

}

Я выполняю реактивную форму angular проверка Если я скрываю текстовое поле, то как я могу пропустить проверку для определенного текстового поля, которое не отображается в моей форме

Если мое текстовое поле имеет вид Видимо моя проверка должна работать

означает, что если isHidden = true проверка не должна работать, если ishidden = false проверка должна работать

Answer 1

Вы можете создать функцию для добавления / удаления валидатора:

 checkValidator() {
    const firstNameControl = this.userForm.controls["firstName"];

    if (this.isHidden) {
      firstNameControl.clearValidators();
    } else {
      firstNameControl.setValidators([Validators.required]);
    }
    firstNameControl.updateValueAndValidity();
  }

Рабочая демонстрация

Answer 2

Одним из способов решения этой проблемы может быть повторное создание экземпляра формы каждый раз, когда значение isHidden изменяется.

ngOnChanges(changes: SimpleChanges) {
    if (changes.isHidden !== undefined) {
        this.userForm = this.formBuilder.group({
            'firstName': [this.user.firstName, isHidden ? [] : [Validators.required]]
        });
    }
}

Но будьте осторожны, экземпляр формы будет создаваться заново при каждом изменении в isHidden.