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

嵌套的FormGroup Angular5不工作

angular

raju · 技术社区 · 6 年前

我在Angular6应用程序中使用嵌套表单组。

 export class NestedFormComponent implements OnInit {

  myForm: FormGroup

  constructor(private fb: FormBuilder) { 
    const phone = this.fb.group({
      area: [],
      prefix: [],
      line: []
    });

    this.myForm = this.fb.group({
      email: '',
      homePhone: phone,
      cellPhone: phone
    });

    this.myForm.valueChanges.subscribe(console.log)
  }

  ngOnInit() {
  }

}

<div id="formContainer">

<div>{{myForm.value | json}}</div>
<hr />

<mat-form-field class="example-full-width">
  <input matInput placeholder="email" formControlName='email'>
</mat-form-field>

<h4>Cell Phone</h4>
<div formGroupName='cellPhone'>

  <mat-form-field>
    <input type="text" plcaeholder='area' matInput formControlName='area'>
  </mat-form-field>

  <mat-form-field>
    <input type="text" placeholder="prefix" matInput formControlName='prefix'>
  </mat-form-field>

  <mat-form-field>
    <input type="text" placeholder="line" matInput formControlName='line'>
  </mat-form-field>

</div>

<h4>Home Phone</h4>
<div formGroupName='homePhone'>
  <mat-form-field>
    <input type="text" plcaeholder='area' matInput formControlName='area'>
  </mat-form-field>

  <mat-form-field>
    <input type="text" placeholder="prefix" matInput formControlName='prefix'>
  </mat-form-field>

  <mat-form-field>
    <input type="text" placeholder="line" matInput formControlName='line'>
  </mat-form-field>

</div>

每当我更改任何表单组中的值时,它就会在另一个表单组中得到更新。请帮忙。

slackblitz是 slackblitz

1 回复 | 直到 6 年前

Michael Desigaud 6 年前

这是因为您通过电话常量使用相同的fb.group实例:

这应该有效:

    constructor(private fb: FormBuilder) { 

    this.myForm = this.fb.group({
      email: '',
      homePhone: this.createFormGroup(),
      cellPhone: this.createFormGroup()
    })
  }

  createFormGroup() {
    return this.fb.group({
      area: [],
      prefix: [],
      line: []
    });
  }

我已经更新了你的 slackblitz

推荐文章

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

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

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

5 月前

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

6 月前

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 月前