无法在 formarray 文本框中输入多个字母

Question

我在表单内有一个表单。当我在选择值为“3”的下拉列表后单击添加新文本字段时，我正在调用一个表单数组，其中我得到多个文本框。 一切正常。 但我遇到了一个问题：

我只想在所选字段不为空时添加新的文本字段。 也就是说，如果“listItem”文本框为空，并且当我单击“添加新文本字段”时，它会显示一个警报。 对于所有文本字段也是如此。

我无法在 formarray 字段中输入多个字母。

请帮我解决问题。 提前致谢。

<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
                   
                          <input type="text" class="form-control" placeholder="enter term"
                          formControlName="name">   
                
                        <input type="text" class="form-control" placeholder="Enter Id"
                        formControlName="id">   
           
                        
                        <input type="text" class="form-control" placeholder="Type" formControlName="type">                                     

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


                    <ng-container *ngIf="showarray">
                                               
                          <input type="text" formControlName="listItem" class="form-control" placeholder="enter dropdownlist items"> 
                          <a (click)="addGroup()">Add New Textfield</a>

                    </ng-container>
                    
                     <span formArrayName="times" *ngFor="let time of addForm.controls.times?.value; 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>                   
                     
                          <input type="Submit" class="savebtn" Value="Save" Style="width: 100px;"/>&nbsp;
 
                  </form>

export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  addForm: FormGroup;
  submitted = false;
  showarray: any;

  public dropdownitems = [{
    name: "A",
    id: 1
  },{
    name: "B",
    id: 2
  },{
    name: "C",
    id: 3   
  },{
    name: "D",
    id: 4    
  }]


 constructor(
    private formBuilder: FormBuilder,
    ) { }

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

  }

  onSubmit(){
    this.submitted = true;
    if (this.addForm.invalid) {
      alert ('Please fill up complete details');
      return;
    }
    console.log(this.addForm.value);   
}


value = this.formBuilder.group({
  lists: ['', Validators.required],
});


addGroup() {
  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);
}



}

Answer 1

问题在于您如何迭代 formArray。您可以不使用 *ngFor="let time of addForm.controls.times?.value;，您需要使用 formArray 创建一个 getter 并遍历 formArray.controls（永远不要超过“值”），否则，每次进行更改时，Angular 都会重新绘制数组，你就会失去焦点。

所以，首先创建一个类似的函数

  get timesArray()
  {
    return this.addForm.get('times') as FormArray
  }

然后注意标签

   <!--first a div (or ng-container if you can not add extra tags) with formArrayName-->
   <ng-container formArrayName="times">
   <!--then iterate over timesArray.controls and use [formGroupName]-->
     <span *ngFor="let time of timesArray.controls;let i=index"
             [formGroupName]="i">
         <!--after you use formControlName-->
              <input type="text" class="form-control" formControlName="lists" 
                   placeholder="enter dropdown options">  
            <a (click)="removeGroup(i)">Remove Textfield</a>
        </span>
   </ng-container>

顺便说一句：嗯，你有一个 FormGroups 的 formArray，你也可以选择有一个 FormControls 的 FormArray。我知道这不是您的表单，但是如果只想拥有一个值数组而不是标签更改的对象数组，请参阅在这种情况下您不使用 [formGroupName] 和 formControlName="list" 否则 [formControlName ]="我"

   <!--first a div (or ng-container if you can not add extra tags) with formArrayName-->
    <div formArrayName="times">
        <!--then iterate over timesArray.controls -->
        <span *ngFor="let time of timesArray.controls;let i=index">
         <!--after you use formControlName[i]-->
              <input type="text" class="form-control" [formControlName]="i" 
                   placeholder="enter dropdown options">  
            <a (click)="removeGroup(i)">Remove Textfield</a>
        </span>
    </div>

好吧，在这种情况下，函数 addGroup 和 removeGroup 很简单

//see that we use the "getter" timesArray
addGroup() {
 this.timesArray.push(new FormControl());
}
removeGroup(index) {
 this.timesArray.removeAt(index)
}

您可以查看article of Netanel Basal 关于 FormArrays