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

的文档

如果属性在嵌套的formGroup中，我如何使用formControlName？

1 个答案: