根据 angular 中的下拉菜单启用或禁用 formarray答案

【问题标题】：enable or disable formarray based on dropdown in angular根据 angular 中的下拉菜单启用或禁用 formarray
【发布时间】：2023-03-27 23:44:01
【问题描述】：

我有一个包含以下字段的表单：名称（文本框）、类别（下拉列表）。我想在选择下拉 =“3”时显示一个带有添加选项的表单数组。当我点击“添加新文本字段”时，应该添加新的文本框。还需要根据下拉菜单启用或禁用表单数组，因为它不应该影响验证

现在我在选择 dropdown="3" 后显示一个文本框 (listitem)。然后在 addnewtextfield 上，我调用了一个 formarray。（需要删除它）。

请帮我实现这个功能。提前致谢。

<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"
    }
  ]

【问题讨论】：

嗨！你能解释一下是什么问题吗？
您好，先生，感谢您的回复。我的问题是我想直接在选择下拉列表时显示一个formarray文本框为“3”。截至目前，我只能在单击添加新字段时显示表单数组。
您可以在 if(category === '3') { 中调用 this.addGroup() 并且仅在 formArray 长度大于 1 时显示删除输入文本。另一个选项是用一个项目初始化 arrayGroup。

标签： angular forms validation

【解决方案1】：

这是您编辑的代码https://stackblitz.com/edit/angular-ivy-bzfjvw

我在您的 .ts 代码中添加了两行。首先，如果类别值等于3，我调用addGroup函数，因为你想从第一个项目开始而不点击。

但是，这部分很重要，如果类别不是3，我们要清理timesArray，删除所有元素，因为如果不是，当你再次选择类别3时，它会在开始时是2个元素.

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

【讨论】：