Erforderlicher Validator funktioniert nicht mit asynchronem Feld

Question

Ich habe ein Problem, das dadurch verursacht wird, dass der "erforderliche" Validator nicht mit einem Formularfeld arbeitet, das asynchron von einer AngularFire-Datenbank aktualisiert wird. Wenn ich versuche, einen vorhandenen Benutzer zu bearbeiten, obwohl die Eingaben "Benutzername" und "E-Mail" beide die Werte des vorhandenen Benutzers enthalten, scheint Angular jede <input> leer zu betrachten, bis ich sie eintippe. Ich kann dieses Verhalten sehen, weil die Submit-Schaltfläche deaktiviert ist, bis ich jedes <input> eintippe.

Hier ist meine Komponente

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(); 
     } 
    } 
} 

Hier ist meine Ansicht

<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> 

ich weiter bestätigen können, dass Angular meine sieht <input> s als leer, denn wenn ich Registerkarte in einem der Felder und dann auf die Registerkarte aus es ohne etwas zu tippen, erscheint die <div>, die die Fehlermeldung anzeigt.

Warum berücksichtigt Angular beide meiner <input> s leer, wenn ich einen vorhandenen Benutzer bearbeiten? Gibt es eine andere Art, dass ich den "erforderlichen" Validator handhaben muss, da ich die async Leitung verwende?

Answer 1

Ich bin sicher, dass Ihre Konsole voller Fehler sein sollte. Sie dürfen ngModel nicht innerhalb einer FormGroup verwenden. Sie verwenden entweder vorlagengesteuerte Formulare (FormsModule) oder modellgesteuerte Formulare (ReactiveFormsModule), aber Sie können nicht beide ineinander verwenden.

Entfernen Sie das ngModel und den Wert stuff. Um den Wert eines Formulars festgelegt, wenn ReactiveFormsModule verwenden, verwenden Sie die Methoden setValue() oder patchValue():

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

Oder Sie können einen einzelnen Formcontrol Wert:

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