代码之家 › 专栏 › 技术社区 › raju

访问嵌套FormGroup中的FormArray,angular6

angular

raju · 技术社区 · 6 年前

我有一个简单的反应形式

  ngOnInit() {
    this.outerForm = this._formBuilder.group({
      firstFormGroup: this._formBuilder.group({
        nserNumber: ['', [Validators.required, Validators.pattern(this.spacePattern)]],            
      }),
      secondFormGroup: this._formBuilder.group({
        nser1Number: ['', [Validators.required, Validators.pattern(this.spacePattern)]],
        connectionRow: this._formBuilder.array([{
          connectionType: [''],
          switchHostname: ['']
        }])
      })
    });
  }

我可以在UI中显示这个。但我无法展示 connectionRow

<fieldset formGroupName="secondFormGroup">
      <input matInput placeholder="PID number" id='nser1Number' formControlName="nser1Number">

    <div class='formRow' *ngFor="let itemrow of connectionRow.controls; let i=index" [formGroupName]="i">
        {{i}}
    </div>
  </fieldset>

请帮忙

0 回复 | 直到 5 年前

Sharan Mohandas 6 年前

模板中没有提到formArrayName。

在HTML中更新

<fieldset formGroupName="secondFormGroup">
    <input matInput placeholder="PID number" id='nser1Number' formControlName="nser1Number">
    <div formArrayName="connectionRow">
        <div class='formRow' *ngFor="let itemrow of connectionRow.controls; let i=index" [formGroupName]="i">
            <input matInput placeholder="Tenant" formControlName="connectionType">
            <input matInput placeholder="Tenant" formControlName="switchHostname">
        </div>
    </div>
</fieldset>

在TS文件中

get connectionRow(): FormArray {
    return this.outerForm.get('secondFormGroup').get("connectionRow") as FormArray;
}
enter code here

<mat-form-field>
    <input matInput placeholder="Enter your email" formControlName="connectionType" required>
    <mat-error *ngIf="connectionRow.controls[i].connectionType.invalid">Your message</mat-error>
</mat-form-field>

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前