隐藏字段时阻止 ReactiveForm 的表单验证

Question

我的表单中有一个按钮，在表单有效之前该按钮处于禁用状态。当我的所有字段都可见时，一切都会正常进行。但是，当某个字段被条件 (ngIf) 隐藏时，验证仍然会完成。我想仅在该字段可见时控制该字段。

我的HTML

<form [formGroup]="form" (ngSubmit)="onRegister()">
    <div class="signup-form">
      <mat-radio-group>
        <mat-radio-button class="radio" value="candidat" (click)="resetCompany(false)" checked>Candidat
        </mat-radio-button>
        <br>
        <mat-radio-button class="radio" value="company" (click)="resetCompany(true)">Entreprise</mat-radio-button>
      </mat-radio-group>

      <mat-form-field>
        <input matInput placeholder="Nom" formControlName="lastName">
      </mat-form-field>
      <span *ngIf="lastName.invalid && lastName.touched" class="errorvalidation">
        Votre nom est requis.
      </span>

      <mat-form-field [ngStyle]="{'display':selectedCompany === true ? 'none' : 'inline-block' }">
        <input matInput placeholder="Prénom" formControlName="firstName">
      </mat-form-field>
      <span *ngIf="firstName.invalid && firstName.touched" class="errorvalidation">
        Votre prénom est requis.
      </span>

      <mat-form-field>
        <input matInput placeholder="Adresse e-mail" formControlName="email">
      </mat-form-field>
      <span *ngIf="email.invalid && email.touched" class="errorvalidation">
        L'email ne semble pas être au bon format.
      </span>

      <mat-form-field>
        <input matInput type="password" placeholder="Mot de passe" formControlName="password">
      </mat-form-field>
      <span *ngIf="password.invalid && password.touched" class="errorvalidation">
        Le mot de passe est requis.
      </span>

      <mat-form-field>
        <input matInput type="password" placeholder="Confirmez mot de passe" formControlName="confirmPassword">
      </mat-form-field>
      <div *ngIf="f.confirmPassword.errors" class="errorvalidation">
        <div *ngIf="f.confirmPassword.errors.required && confirmPassword.touched">Le champ est requis</div>
        <div *ngIf="f.confirmPassword.errors.mustMatch && confirmPassword.touched">Les mots de passes doivent être
          identiques</div>
      </div>

    </div>
    <div mat-dialog-actions align="end">
      <button mat-raised-button (click)="onNoClick()" color="warn">Annuler</button>
      <button class="btn" [disabled]="form.invalid" type="submit" mat-button [mat-dialog-close]>Je
        m'inscris</button>
    </div>
  </form>

我的formGroup定义

ngOnInit() {
    this.form = this.formBuilder.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, {
      validator: MustMatch('password', 'confirmPassword')
    });
  }

如何在隐藏字段“firstName”时省略对其的验证？

谢谢你

Answer 1

我认为您可以通过单击单选按钮时动态删除/添加表单控件来实现此目的。这样，除非单击相应的单选按钮，否则不会执行验证。

组件

  ngOnInit() {
    this.form = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });

    this.resetCompany(false);
  }

  resetCompany(b){
    this.selectedCompany = b;
    if(!b){ //add control when "Candidat" selected
      this.form.addControl('firstName', new FormControl('', Validators.required))
      this.form.addControl('lastName', new FormControl('', Validators.required))
    }else{ //remove controls when "Entreprise" selected
      this.form.removeControl('firstName');
      this.form.removeControl('lastName');
    }
  }

模板

<ng-container  *ngIf="selectedCompany === false && lastName != null">
<mat-form-field>
  <input matInput placeholder="Nom" formControlName="lastName">
</mat-form-field>
<span *ngIf="lastName.invalid && lastName.touched" class="errorvalidation">
  Votre nom est requis.
</span>
</ng-container>

<ng-container *ngIf="selectedCompany === false && firstName != null">
  <mat-form-field>
    <input matInput placeholder="Prénom" formControlName="firstName">
  </mat-form-field>
  <span *ngIf="firstName?.invalid && firstName?.touched" class="errorvalidation">
    Votre prénom est requis.
  </span>
</ng-container>

Stackblitz 示例