angular - 无法在响应式(Reactive)表单的 FormArray 中为 FormArray 输入超过 1 个字符

Question

我认为这可能是响应式(Reactive)表单的一个错误。如果有经验丰富的 Angular 专家提供帮助，我将不胜感激。

症状:无法在给定时间输入超过 1 个字符。

出现情况:当输入是 FormArray 中的 FormArray 时

我添加了一个 Plunker 链接，如下所示: https://embed.plnkr.co/zl2BQe/ .

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
 })
export class AppModule { }

//app.component.ts
import { Component, OnInit} from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  testForm: FormGroup; 

  ngOnInit(){
   this.testForm = new FormGroup({
   'lines': new FormArray([
    new FormGroup({
      'fields': new FormArray([
        new FormControl('')
      ])
     })
    ])
   })
  }

onAddLine(){
if(this.testForm.value.lines.length<10){
  (<FormArray>this.testForm.get('lines')).push(
    new FormGroup({
      'fields': new FormArray([
        new FormControl()
      ])
     })
   )
 }
}

onAddField(){
  // Not developed       
 }
}

//app.component.html
<div class="panel panel-default">
  <div class="panel-heading">
    Angular Reactive FormArray Error 
    <!--<button class="btn btn-primary" (click)="onAddField()">Add 
    Field</button>-->
    <button class="btn btn-primary" (click)="onAddLine()">Add 
    Line</button>
  </div>
<div class="panel-body">
  <form [formGroup]="testForm">
    <div class="form-inline" *ngFor="let line of testForm.value.lines; let i = index" formArrayName="lines">
      <div class="form-group">
        <span [formGroupName]="i">
          <span *ngFor="let field of testForm.value.lines[0].fields; let j = index" formArrayName="fields">
              <input type="text" class="form-control" [formControlName]="j">
              Please Type on Input Field
          </span>
        </span>
      </div>
    </div>
  </form>
</div>

Answer 1

原因

您遇到此问题是因为您依赖 formGroup.value，当任何输入值发生更改时，它都会获取一个新实例。因此，您的控件树将在 DOM 中重新创建，从而失去焦点。

造成此问题的步骤是:

• 您更改将值直接反射(reflect)到的输入FormControl值
• formGroup.value 发生变化
• *ngFor 迭代新值并创建新元素，删除旧元素
• 新元素将具有前一个元素的值，但不具有焦点

为什么 *ngFor 创建新元素

NgFor 由于 trackBy 默认为枚举值而创建新元素。如果值发生更改，则由旧值跟踪的 DOM 元素将被视为已过时，从而被删除，并为新值创建一个新元素。即使该值看起来相同，但实际上并非如此，它只是 FormControl 的另一个实例，因为您实际上是在枚举 FormControl。

就你的情况而言:*ngFor="让 testForm.value.lines 行;...和*ngFor="let testForm.value.lines[0].fields 字段;...由于这个原因是不正确的。

解决方案

Here is an updated Plunker .

因此模板应如下所示:

  <div class="panel panel-default">
    <div class="panel-heading">
      Angular Reactive FormArray Error 
      <!--<button class="btn btn-primary" (click)="onAddField()">Add Field</button>-->
      <button class="btn btn-primary" (click)="onAddLine()">Add Line</button>
    </div>
    <div class="panel-body">
      <form [formGroup]="testForm">
        <div class="form-inline" *ngFor="let line of testForm.get('lines').controls; let i = index" formArrayName="lines">
          <div class="form-group">
            <span [formGroupName]="i">
              <span *ngFor="let field of line.get('fields').controls; let j = index" formArrayName="fields">
                  <input type="text" class="form-control" [formControlName]="j">
                  Please Type on Input Field
              </span>
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>