Question

我正在开发具有角度4的离子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>

Answer 1

第三方控件（例如你的）需要ControlValueAccessor以角形式运行，否则它们的行为与本机元素相似，并且可以使用DefaultValueAccessor。在这种情况下，您应该使用ngDefaultControl属性。在你的情况下

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

应该为你解决这个问题。

Answer 2

您不能同时使用formControl和name。如果你想要一个名字属性而不是你写的：

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

Angular 4将错误称为“没有未指定名称属性的表单控件的值访问器”

2 个答案: