反应式（基于模型）形式的 Angular 2 md-radio 按钮不起作用并停止 md-input 显示

Posted 2023-02-22

【中文标题】反应式（基于模型）形式的 Angular 2 md-radio 按钮不起作用并停止 md-input 显示

【英文标题】：Angular 2 md-radio buttons in reactive (model based) forms don't work & stop md-input display

【发布时间】：2017-03-28 15:15:21

【问题描述】：

我正在遵循http://devdocs.io/angular~2_typescript/api/forms/index/radiocontrolvalueaccessor-directive 的反应形式单选按钮的说明，并使用 Angular 2.1.2 和 Google 的 MD-alpha.10 Atom-typescript 说我没有错误。我收到以下控制台错误。

core.umd.js:3004 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/input/postApartment4Rent.component.html:47:62 caused by: No value accessor for form control with name: 'pets'
Error: No value accessor for form control with name: 'pets'
at _throwError (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:1231:15)
at setUpControl (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:1171:13)
at FormGroupDirective.addControl (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:3595:13)
at FormControlName._setUpControl (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:4029:48)
at FormControlName.ngOnChanges (http://localhost:3000/node_modules/@angular/forms/bundles/forms.umd.js:3975:22)
at Wrapper_FormControlName.detectChangesInInputProps (/ReactiveFormsModule/FormControlName/wrapper.ngfactory.js:44:18)
at _View_PostApartmentComponent0.detectChangesInternal (/AppModule/PostApartmentComponent/component.ngfactory.js:4994:30)
at _View_PostApartmentComponent0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
at _View_PostApartmentComponent0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
at _View_PostApartmentComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9331:23)

相关代码如下：

HTML 用于表单组件的视图

<form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)">

<p id="petsPolicy" class="required" aria-labelledby="petsPolicy"
  i18n="select summary pets policy">Pets Policy - Summarized</p>
<md-radio-group>
  <md-radio-button i18n="No pets allowed" value="no_pets" formControlName="pets">No pets allowed</md-radio-button>
  <md-radio-button i18n="Cats allowed" value="cats_allowed" formControlName="pets">Cats allowed</md-radio-button>
</md-radio-group>

组件管理表单

import  Component  from "@angular/core";
import  FormBuilder, FormGroup, FormControl  from '@angular/forms';

@Component( ...etc.)

export class PostApartmentComponent 
  registerApartment4RentForm: FormGroup;
  constructor(private formBuilder: FormBuilder) 
    this.registerApartment4RentForm = this.formBuilder.group(
    city: '',
    zipCode: '',
    streetAddress: '',
    pets: ''
    );
   
  
  form = new FormGroup(
  pets: new FormControl( )
  );

我尝试导入 FormControlName，但没有帮助。除了错误声明之外，单选按钮不会在单击新按钮时切换，并且按钮圆圈并排显示为 2，而不是 1 在另一个内。此外，所有 md 输入都不显示。当

formControlName="pets"

从 md-ratio-button HTML 中删除，md-inputs 重新出现并工作。

我已经从开发文档中复制了响应式表单的代码并更改了变量名称。还需要做什么才能让 md-radio-buttons 正常工作？

【问题讨论】：

我在 Angular Material2 的问题中将这种情况发布为 #1875。截至 11 月 22 日，这是一个未解决的问题。我不清楚问题是代码问题还是文档错误。

【参考方案1】：

我遇到了同样的问题，直到我发现你必须在md-radio-group 组件上设置formControlName：

<form novalidate [formGroup]="userInfoForm" (ngSubmit)="onSubmit()">

      <md-radio-group name="gender" formControlName="gender">

        <md-radio-button class="example-radio-button" value="Female">
          Female
        </md-radio-button>

        <md-radio-button class="example-radio-button" value="Male">
          Male
        </md-radio-button>  

      </md-radio-group>

</form>

【讨论】：

我很高兴它对你有用 @m4design :)