角4は、 "指定されていない名前属性を持つフォームコントロールの値アクセサーなし"

Question

私はアングル4のイオン2でモバイルアプリケーションを開発しています。ログアウト後、ログインページにリダイレクトされます。ですから、app.module.tsファイルにインポートしたsharedModuleを作成しました。未指定のname属性あなたは同時にformControlと名前を使用することはできません

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

とフォームコントロールのための

値なしアクセサ：この後、私は以下のエラーを取得しています。 あなたはのように書くことよりも、name属性が必要な場合：

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

Answer 2

サードパーティ製のコントロールなど、あなたがControlValueAccessorがそうでなければ、彼らはネイティブの要素のように振る舞うとDefaultValueAccessorを使用することができ、角度の形で機能するために必要とします。このような場合は、ngDefaultControl属性を使用する必要があります。あなたのケースでは

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

はあなたのためにそれを修正する必要があります。