如果属性位于嵌套的 formGroup 中，如何使用 formControlName？答案

【问题标题】：How can I use formControlName if the attribute is in a nested formGroup?如果属性位于嵌套的 formGroup 中，如何使用 formControlName？
【发布时间】：2017-04-26 08:50:28
【问题描述】：

我正在尝试为几个单选按钮设置 formControlName，但问题是我要绑定的属性位于嵌套的 formGroup 内，我收到此错误：

EXCEPTION: Uncaught (in promise): Error: Cannot find control with name: 'pubSub'

模板：

<div class="form-group">    
  <div>
     <label class="col-sm-2 control-label">
         Publicador/Subscriptor
     </label>
  </div>
  <div class="col-sm-3">
      <div class="radio c-radio">
          <label>
             <input formControlName="pubSub"
               type="radio" [value]="valoresPubSub.PUBLICADOR"/>
             <span class="fa fa-circle"></span>Publicador
          </label>
      </div>
      <div class="radio c-radio">
         <label>
            <input formControlName="pubSub"
              type="radio" [value]="valoresPubSub.SUBSCRIPTOR"/>
            <span class="fa fa-circle"></span>Subscriptor
          </label>
      </div>
   </div>
</div>

组件中的formGroup：

constructor (private fb: FormBuilder){
}

ngOnInit() {
  this.formEnviarSolicitud = this.fb.group({
        accion: [null, Validators.required], 
        tipoModificacion: [null, Validators.required],
        webService: this.fb.group({
            pubSub: [null]
        })
    });
}

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

解决方法：我需要使用FormGroupName将DOM绑定到一个FormGroup，然后我可以使用formControlName来获取我想要的属性名：

模板（注意第一行与formGroupName的区别）：

<div class="form-group" formGroupName="webService">    
  <div>
     <label class="col-sm-2 control-label">
         Publicador/Subscriptor
     </label>
  </div>
  <div class="col-sm-3">
      <div class="radio c-radio">
          <label>
             <input formControlName="pubSub"
               type="radio" [value]="valoresPubSub.PUBLICADOR"/>
             <span class="fa fa-circle"></span>Publicador
          </label>
      </div>
      <div class="radio c-radio">
         <label>
            <input formControlName="pubSub"
              type="radio" [value]="valoresPubSub.SUBSCRIPTOR"/>
            <span class="fa fa-circle"></span>Subscriptor
          </label>
      </div>
   </div>
</div>

FormGroupName 的文档

【讨论】：