如果屬性位於嵌套formGroup中，如何使用formControlName？

Question

我正在嘗試設置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] 
     }) 
    }); 
} 

Answer 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