angular - 基于 angular 的下拉列表启用或禁用 formarray

Question

我有一个包含以下字段的表单:名称(文本框)、类别(下拉列表)。
我想在选择 dropdown="3"时显示一个带有添加选项的表单数组。当我单击“添加新文本字段”时，应该添加新文本框。
还需要根据下拉列表启用或禁用表单数组，因为它不应该影响验证
现在我在选择 dropdown="3"后显示一个文本框 (listitem)。然后在 addnewtextfield 上我调用了一个表单数组。(需要删除它)。
请帮我实现功能。提前致谢。

<select class="Dropdown" formControlName="category">
                            <option value="undefined" selected disabled >Select Category</option>
                            <option  *ngFor="let list of dropdownitems" [value]="list.id" >{{list.name}}</option>
                        </select>


    <ng-container *ngIf="showarray">

        <input type="text" formControlName="listItem" class="form-control" >
        <a (click)="addGroup()">Add New Textfield</a>

    </ng-container>

  <ng-container formArrayName="times">
    <span  *ngFor="let time of timesArray.controls; let i = index;">
                      <span [formGroupName]="i">                         
                            <input type="text" class="form-control" formControlName="lists" placeholder="enter dropdown options">  

                      </span>
    <a (click)="removeGroup(i)">Remove Textfield</a>
    </span>
  </ng-container>

这是我禁用或启用代码的地方。

 ngOnInit(): void {
    this.addForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.pattern('[a-zA-Z# ]*')]],
      times: this.formBuilder.array([])
      }); 
  }

添加/删除表单数组代码

addGroup() {
  if (this.addForm.get('listItem').invalid)
  {
     alert ("fill the term field")
     this.addForm.get('listItem').updateValueAndValidity()
     return;
  }
  if (this.timesArray.invalid)
  {
     alert ("fill the items field")
     this.timesArray.updateValueAndValidity()
     return;

  }
  const val = this.formBuilder.group({
    lists: ['', Validators.required],
  });
  const form = this.addForm.get('times') as FormArray;
  form.push(val);
}

removeGroup(index) {
  const form = this.addForm.get('times') as FormArray;
  form.removeAt(index);
}

我希望 formarray 格式如下所示

"times": [
    {
      "lists": "ssssssssssss"
    },
    {
      "lists": "sssssssssss"
    },
    {
      "lists": "ssssssssssss"
    }
  ]

Answer 1

这是您编辑的代码 https://stackblitz.com/edit/angular-ivy-bzfjvw
我在您的 .ts 代码中添加了两行。首先，如果类别值等于 3，我调用 addGroup 函数，因为您想从第一项开始而不单击。
但是，这部分很重要，如果类别不是 3，我们将清理 timesArray，删除所有元素，因为如果不是，当您再次选择类别 3 时，它会在开始时是 2 个元素。

第二部分，在您的 .html 代码中，我在第 29 行添加了一个 * ngIf。删除文本字段仅在包含多个元素时才会显示。