必要なバリデーターが非同期フィールドで動作しない

Question

「必須」バリデーターがAngularFireデータベースから非同期に更新されるフォーム・フィールドでは機能しないことが原因であるように見える問題が発生しました。既存のユーザーを編集しようとすると、「ユーザー名」と「電子メール」の両方の入力に既存のユーザーの値が含まれていても、Angularは入力するまでそれぞれ<input>を空にしているように見えます。 Submitボタンは、それぞれ<input>を入力するまで無効になっているので、その動作を見ることができます。

は、ここで私はさらに角度が外に、タブをフィールドの一つに私の<input> Sとして空のためであればI]タブを見ていることを確認することができますここで私の見解

<form [formGroup]="form" (ngSubmit)="submit()"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input [(ngModel)]="user.username" type="text" class="form-control" formControlName="username" value={{(item|async)?.name}}> 
     <div *ngIf="form.controls.username.touched && !form.controls.username.valid" class="alert alert-danger"> 
      Username is required 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="email">Email</label> 
     <input [(ngModel)]="user.email" type="text" class="form-control" formControlName="email" value={{(item|async)?.email}}> 
     <div *ngIf="form.controls.email.touched && !form.controls.email.valid" class="alert alert-danger"> 
      Email is required 
     </div> 
    </div> 
    <button [disabled]="!form.valid" class="btn btn-primary" type="submit">Submit</button> 
</form> 

だ私のコンポーネント

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { AngularFireDatabase } from 'angularfire2/database'; 

import { User } from './user'; 

@Component({ 
    selector: 'user-form', 
    templateUrl: 'user-form.component.html' 
}) 
export class UserFormComponent { 
    key; 
    item; 
    form: FormGroup; 
    user = new User(); 

    constructor(fb: FormBuilder, private _router: Router, private _route:ActivatedRoute, private db: AngularFireDatabase) { 
     this.form = fb.group({ 
      username: ['', Validators.required], 
      email: ['', Validators.required] 
     }) 
    }; 

    ngOnInit() { 
     this._route.params.subscribe(params => { 
      this.key = params["key"]; 
     }) 

     if (!this.key) { 
      this.title = "New User"; 
     } 
     else { 
      // This is the path that is followed for editing an existing user 
      this.title = "Edit User"; 
      this.item = this.db.object(this.key).valueChanges(); 
     } 
    } 
} 

です何も入力せずに、エラーメッセージを表示する<div>が表示されます。

なぜ、私は既存のユーザーを編集しているときに<input>の両方が空であると考えますか？ asyncパイプを使用しているので、「必要な」バリデーターを処理する必要がある別の方法はありますか？

Answer 1

あなたのコンソールはエラーでいっぱいになるはずです。 FormGroup内でngModelを使用することはできません。テンプレート駆動型（FormsModule）またはモデル駆動型（ReactiveFormsModule）のいずれかを使用しますが、両方をお互いに使用することはできません。

ngModelと値のものを削除します。

this.form.setValue({ 
    username: 'example', 
    email: 'example@gmail.com' 
}); 

それとも、単一FormControl値を設定することができます：ReactiveFormsModuleを使用しているとき、あなたは方法setValue()またはpatchValue()を使用し、フォームの値を設定するには

this.form.get('username').setValue('example')