angular - Angular 4 中的嵌套表单组

标签 angular

我有这样的表单组

this.PatientInfo = this.fb.group({
      PatientID: [0],
      Gender: '',      
      Name:'',
      Employer: this.fb.group({
        EmployerID: 0,
        Name: [''],
        EmployerAddresses: this.fb.group({
          Address1: [''],
          Address2: [''],
          CityName: [''],          
          District: [''],
          StateName: [''],          
          PostalCode: [''],
          Country: ['']
        })
      })
    });

我正在像这样绑定(bind)数据

<div class="col-md-3" formGroupName="EmployerAddresses">
    <div class="form-group form-group-default">
        <label class="control-label">State</label>
        <div class="input-group">
            <input type="text" class="form-control" formControlName="StateCode">
        </div>
    </div>
 </div>

在顶部,我将表单组保留为 PatientInfo。

这里我收到错误“找不到名称为 EmployerAddresses 的控件”。

你能请任何人帮忙吗?提前致谢。

最佳答案

这段代码解决了我的问题。

this.PatientInfo = this.fb.group({
  PatientID: [0],
  Gender: '',      
  Name:'',
  Employer: this.fb.group({
    EmployerID: 0,
    Name: [''],
    EmployerAddresses: this.fb.group({
      Address1: [''],
      Address2: [''],
      CityName: [''],          
      District: [''],
      StateName: [''], 
      StateCode: [''],
      PostalCode: [''],
      Country: ['']
    })
  })
});

<div class="col-md-3" formGroupName="Employer">
  <div class="form-group form-group-default" formGroupName="EmployerAddresses">
      <label class="control-label">State</label>
      <div class="input-group">
          <input type="text" class="form-control" formControlName="StateCode">
      </div>
  </div>
</div>

谢谢...

关于angular - Angular 4 中的嵌套表单组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47493631/

相关文章:

angular - 如何访问 Promise then() 函数中的类变量?

javascript - Angular 5 : Lazy Loading is not working properly with ng build - -prod with Angular-CLI 1. 7.x

javascript - ng2 [已禁用] ="!myInput.value"无法正常工作

javascript - 下划线符号更改变量的可访问性

angular - 验证错误 : Progress Plugin Invalid Options

Angular 2 在路由器导出中设置默认内容

javascript - _co.photo 是未定义的控制台错误和错误上下文,但代码按预期工作

Angular 4属性无故更新

Angular 2 ng-bootstrap 模态

angular - 将组件动态添加到表单中的 FormArray( Angular 2/4)