Angular 4 给出错误为“具有未指定名称属性的表单控件的无值访问器”答案

【问题标题】：Angular 4 give error as "No value accessor for form control with unspecified name attribute"Angular 4 给出错误为“具有未指定名称属性的表单控件的无值访问器”
【发布时间】：2017-12-26 19:01:36
【问题描述】：

我正在使用 angular 4 在 ionic 2 中开发移动应用程序。我之前已经使用反应表单实现了登录页面，它工作正常，但是在实现功能时，注销控制将重定向到登录页面。因此，我创建了已在 app.module.ts 文件中导入的 sharedModule。在此之后，我收到以下错误：

具有未指定名称属性的表单控件没有值访问器

Login.ts
   constructor(public navCtrl: NavController, public navParams: NavParams,
                private auth: AuthServiceProvider, private alertCtrl: AlertController,
                private loadingCtrl: LoadingController, public storage: Storage,
                private fb: FormBuilder) {
        this.loginForm = this.fb.group({
            'dashboardUsername': [null, Validators.required],
            'dashboardPassword': [null, Validators.required]
        })
    }

 Login.html
    <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
     <ion-row class="htm-container">
      <ion-col>
      <ion-list inset>
      <ion-item class="inputRounded"                                            [class.error]="!loginForm.controls['dashboardUsername'].valid && loginForm.controls['dashboardUsername'].touched">
     <ion-input type="text" placeholder="Dashboard username"                             [formControl]="loginForm.controls['dashboardUsername']" name="dashboardUsername"></ion-input>
    </ion-item>
    <div class="htm-error"                         *ngIf="loginForm.controls['dashboardUsername'].hasError('required') && loginForm.controls['dashboardUsername'].touched">
    <p>Username is required!</p>
     </div>
     <ion-item class="inputRounded"                        [class.error]="!loginForm.controls['dashboardPassword'].valid && loginForm.controls['dashboardPassword'].touched">
     <ion-input type="password" placeholder="Dashboard password" 
        [formControl]="loginForm.controls['dashboardPassword']" name="dashboardPassword"></ion-input>
    </ion-item>
      <div class="htm-error" *ngIf="loginForm.controls['dashboardPassword'].hasError('required') &&
                      loginForm.controls['dashboardPassword'].touched">
    <p>Password is required!</p>
     </div>
     </ion-list>
      </ion-col>
     </ion-row>
      <ion-row>
     <ion-col class="signup-col">
     <button ion-button color="light" class="submit-btn btn-bottom-margin" full type="submit"
       [disabled]="!loginForm.valid">Sign In
     </button>
     </ion-col>
     </ion-row>
    </form>

【问题讨论】：

标签： ionic2 angular-reactive-forms angular4-forms

【解决方案1】：

第三方控件（例如您的控件）需要 ControlValueAccessor 才能使用角度形式，否则它们的行为类似于原生元素并且可以使用 DefaultValueAccessor。在这种情况下，您应该使用ngDefaultControl 属性。你的情况

<ion-input type="text" placeholder="Dashboard username"
 ngDefaultControl
[formControl]="loginForm.controls['dashboardUsername']" name="dashboardUsername">

应该为你解决这个问题。

【讨论】：

谢谢，当我们要进行测试时，这个错误也会出现在 Ionic 4 with Angular 中。
@DrutaRuslan 你是对的，但你知道为什么我们在测试中需要这个而不是在真正的构建中吗？我对这种行为感到困惑

【解决方案2】：

您不能同时使用 formControl 和 name。如果你想要一个 name 属性，你可以写成：

<ion-input type="password" placeholder="Dashboard password" 
    [formControl]="loginForm.controls['dashboardPassword']" [attr.name]="dashboardPassword"></ion-input>

【讨论】：

感谢您的回复。我已经尝试过您的解决方案，也尝试过删除 name 属性，但仍然出现相同的错误。