angular - 动态 FormGroup 取决于选择选项

Question

我有一个表单，其中包含每个 Formation 具有的 formGroup（Formation）列表，(intitule1,intitule2, idType)它取决于我选择的类型(intitule1,intitule2, idType,lienSso)或(intitule1,intitule2, idType, lsReferentPapByIdReferentPap)

所以我这样做了，我的表格是：

this.form = this.fb.group({
  description: [null, Validators.compose([Validators.required])],
  gestesMetiers: [null, Validators.compose([Validators.required])],
  lsFormationsById: this.fb.array([this.createFormation()]),
});

formGroup (lsFormationsById) 喜欢：

  createFormation(): FormGroup {
    const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
    this.formGroup = this.fb.group({
      intitule1: [null, Validators.compose([Validators.required])],
      intitule2: [],
      idType: [null, Validators.compose([Validators.required])],
      lienSso: [null, Validators.compose([Validators.required, Validators.pattern(reg)])],
      lsReferentPapByIdReferentPap: this.fb.array([this.createReferent()])
    });
    this.referentList = this.formGroup.get('lsReferentPapByIdReferentPap') as FormArray;

    return this.formGroup;
  }

我的选择：

          <div class="form-group col-6">
            <label for="idType" class="control-label">Type de formation</label>
            <select id="idType" class="form-control custom-select" formControlName="idType" type="text"  (change)="changedFieldType($event,i)" >
              <option value="1">E-learing</option>
              <option value='3'>Lien externe</option>
              <option value="4">pair à pair</option>
              <option value="2">Présentiel</option>
            </select>
          </div>

          <div *ngIf="formation.value.idType === '4'" class="form-group col-12">
            <div formArrayName="lsReferentPapByIdReferentPap">
              <div  *ngFor="let referent of referentFormGroup.controls; let j = index;" >
                <div [formGroupName]="j" class="row">
                  <div class="form-group col-6" >
                    <label for="nom" class="control-label">Nom du référent </label>
                    <input type="text" class="form-control" id="nom" formControlName="nom" >
                  </div>
                  <div class="form-group col-6" >
                    <label for="prenom" class="control-label">Prénom du référent </label>
                    <input type="text" class="form-control" id="prenom" formControlName="prenom" >
                  </div>
                  <div class="form-group col-6" >
                    <label for="cuid" class="control-label">CUID </label>
                    <input type="text" class="form-control" id="cuid" formControlName="cuid" >
                  </div>
                  <div class="form-group col-6" >
                    <label for="telephone" class="control-label">Téléphone </label>
                    <input type="text" class="form-control" id="telephone" formControlName="telephone" >
                  </div>
                  <div  class="form-group col-6">
                    <label for="siteRattachement" class="control-label">Site de rattachement </label>
                    <input type="text" class="form-control" id="siteRattachement" formControlName="siteRattachement" >
                  </div>
                  <div  class="form-group col-6">
                  <label for="email" class="control-label">Email </label>
                  <input type="text" class="form-control" id="email" formControlName="email" required>
                  </div>
                  <div  class="form-group col-6">
                    <label for="idTypeSoutien" class="control-label">Type de soutien</label>
                    <select id="idTypeSoutien" class="form-control custom-select" formControlName="idTypeSoutien" type="text" >
                      <option value="1">Soutiens techniques nationaux</option>
                      <option value='2'>Référent compétent local</option>
                      <option value="3">Référent sous Plazza</option>
                    </select>
                  </div>
                  <div  class="form-group col-6">
                    <label for="domain" class="control-label">Domaine référent </label>
                    <input type="text" class="form-control" id="domain" formControlName="domain">
                  </div>
                </div>
                <div class="form-group col-12 text-right">
                  <a  (click)="removeReferent(j)" title="Supprimer le référent {{j+1}}" data-toggle="tooltip" data-placement="top" ><img src="assets/img/delete.png" alt="Supprimer"/></a>
                </div>

              </div>
              <div class="form-group col-12 text-left">
                <a  (click)="addReferent()" title="Ajouter un référent" data-toggle="tooltip" data-placement="left"><img src="assets/img/add.png" alt="Ajouter" /> Ajouter un Referent</a>
              </div>

            </div>
          </div>

          <div class="form-group col-12"  *ngIf="formation.value.idType === '3' || formation.value.idType === '1' || formation.value.idType === '2'">
            <label for="lienSso" class="control-label">Lien de la formation</label>
            <input id="lienSso" class="form-control"  formControlName="lienSso" type="text">
          </div>
        </div>

谢谢我试图删除控制每个更改选项，但它不起作用：

  changedFieldType(index) {
    if(!this.formGroup.contains('lsReferentPapByIdReferentPap')){
      this.formGroup.addControl('lsReferentPapByIdReferentPap', this.fb.array([this.createReferent()]));
      this.referentList = this.formGroup.get('lsReferentPapByIdReferentPap') as FormArray;

    }
    if(!this.formGroup.contains('lienSso')){
      this.formGroup.addControl('lienSso', this.fb.control('', Validators.required));
    }

    if (this.getFormationsFormGroup(index).controls['idType'].value === '4') {
      this.formGroup.removeControl('lienSso');
    }
    if(this.getFormationsFormGroup(index).controls['idType'].value !== '4') {
      this.formGroup.removeControl('lsReferentPapByIdReferentPap');
    }