Angular 向嵌套表单添加和删除表单验证8

我试图创建一个只对四个字段中的两个进行验证的表单，因此在切换表单时尝试为每个字段添加和删除验证程序。任何帮助都将不胜感激，因为我想我错过了一些非常小的东西

您可以在此处下载回购协议-

以下是我的组件：

ngOnInit() {
    this.familyForm = this.parentForm.form;
    this.addFormControls();
  }

  toggle() {
    this.switch = !this.switch;
    this.addFormControls();
  }

  addFormControls() {
    // this.familyForm.clearValidators();
    if (!this.switch) {
      console.log('Father & Mother');
      this.familyForm.addControl('family', new FormGroup({
        fatherName: new FormControl('', [Validators.required]),
        motherName: new FormControl('', [Validators.required]),
        uncleName: new FormControl(''),
        auntieName: new FormControl('')
      }))
    } else {
      console.log('Uncle & Auntie');
      this.familyForm.addControl('family', new FormGroup({
        fatherName: new FormControl(''),
        motherName: new FormControl(''),
        uncleName: new FormControl('', [Validators.required]),
        auntieName: new FormControl('', [Validators.required])
      }))
    }
    this.familyForm.updateValueAndValidity();
    console.log('form controls', this.familyForm.controls);
  }

这是我的html：

<h6>Family Form Component</h6>
<div formGroupName="family">
  <h6 *ngIf="!switch">Father & Mother</h6>
  <div *ngIf="!switch" class="row">
    <br>
    <div class="col">
      <mat-form-field appearance="fill">
        <mat-label>Father name</mat-label>
        <input matInput type="text" formControlName="fatherName" class="form-control" placeholder="Father name">
      </mat-form-field>
    </div>
    <div class="col">
      <mat-form-field appearance="fill">
        <mat-label>Mother name</mat-label>
        <input matInput type="text"  class="form-control" placeholder="Mother Name" formControlName="motherName" >
      </mat-form-field>
    </div>
  </div>

  <div>
    <h6 *ngIf="switch">Uncle & Auntie</h6>
    <div *ngIf="switch" class="row">
      <br>
      <div class="col">
        <mat-form-field appearance="fill">
          <mat-label>Uncle name</mat-label>
          <input matInput type="text" formControlName="uncleName" class="form-control" placeholder="Uncle name">
        </mat-form-field>
      </div>
      <div class="col">
        <mat-form-field appearance="fill">
          <mat-label>Auntie name</mat-label>
          <input matInput type="text"  class="form-control" placeholder="Auntie Name" formControlName="auntieName" >
        </mat-form-field>
      </div>
    </div>`enter code here`
</div>

<button type="button" class="m-4" mat-raised-button (click)="toggle()">Switch</button>

族表单组件
父母


父名
母亲姓名
叔叔阿姨


叔叔的名字
阿姨的名字
`在这里输入代码`
转换

我已更改了您的切换功能，并根据您的要求制作了一种验证方法。请参见下面的代码

toggle() {
    this.switch = !this.switch;
    this.setValidators();
 }

下面是setValidators方法

    setValidators = () => {
    if (!this.switch) {
      console.log('Father & Mother');
      (<FormGroup>this.familyForm.controls['family']).controls['fatherName'].setValidators([Validators.required]);
      (<FormGroup>this.familyForm.controls['family']).controls['motherName'].setValidators([Validators.required]);
      (<FormGroup>this.familyForm.controls['family']).controls['uncleName'].setValidators(null);
      (<FormGroup>this.familyForm.controls['family']).controls['auntieName'].setValidators(null);
    } else {
      console.log('Uncle & Auntie');
      (<FormGroup>this.familyForm.controls['family']).controls['uncleName'].setValidators([Validators.required]);
      (<FormGroup>this.familyForm.controls['family']).controls['auntieName'].setValidators([Validators.required]);
      (<FormGroup>this.familyForm.controls['family']).controls['fatherName'].setValidators(null);
      (<FormGroup>this.familyForm.controls['family']).controls['motherName'].setValidators(null);
    }
}

setValidators=（）=>{
如果（！this.switch）{
console.log（“父亲和母亲”）；
（this.familyForm.controls['family']）。controls['fatherName']。setValidators（[Validators.required]）；
（this.familyForm.controls['family']）。controls['motherName']。setValidators（[Validators.required]）；
（this.familyForm.controls['family']）。controls['uncleName']。setValidators（null）；
（this.familyForm.controls['family']）。controls['auntieName']。setValidators（null）；
}否则{
console.log（“叔叔和阿姨”）；
（this.familyForm.controls['family']）。controls['uncleName']。setValidators（[Validators.required]）；
（this.familyForm.controls['family']）。controls['auntieName']。setValidators（[Validators.required]）；
（this.familyForm.controls['family']）。controls['fatherName']。setValidators（null）；
（this.familyForm.controls['family']）。controls['motherName']。setValidators（null）；
}
}

希望这能对你有所帮助

如果您有任何疑问，请告诉我

---

谢谢

我尝试了您的解决方案，但在未定义控件的情况下出现了错误，但是我用一行代码解决了这个问题，我添加了

this.familyForm.removeControl（'family'）-谢谢
addFormControls() {
    this.familyForm.removeControl('family');
    if (!this.switch) {
      console.log('Father & Mother');
      this.familyForm.addControl('family', new FormGroup({
        fatherName: new FormControl('', [Validators.required]),
        motherName: new FormControl('', [Validators.required]),
        uncleName: new FormControl(''),
        auntieName: new FormControl('')
      }))
    } else {
      console.log('Uncle & Auntie');
      this.familyForm.addControl('family', new FormGroup({
        fatherName: new FormControl(''),
        motherName: new FormControl(''),
        uncleName: new FormControl('', [Validators.required]),
        auntieName: new FormControl('', [Validators.required])
      }))
    }
    this.familyForm.updateValueAndValidity();
    console.log('form controls', this.familyForm.controls);
  }
}