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]]
    });
  }

}

我正在实现响应式(Reactive) 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();
  }

Working Demo