Formular keine Validierung auslösen, wenn Eingangswert einstellen programmatisch

Question

ich eine Form, wie dies in Angular2 haben:

<form [formGroup]="form" (ngSubmit)="onSubmit()"> 
    <input type="text" id="name" formControlName="name" value="{{elementToEdit?.name}}"> 
    <button type="submit" [disabled]="!form.valid">Save</button> 
</form> 

Und die Komponente Code wie folgt aussieht:

export class ElementEditComponent implements OnInit { 
    form: FormGroup; 
    elementToEdit: Element; 

    constructor(fb: FormBuilder, 
      private elementService: ElementService) { 
      this.form = fb.group({ 
       "name": new FormControl("", Validators.required) 
      }); 
    } 

    ngOnInit() { 
    this.route.params 
    .switchMap((params: Params) => this.recipeService.getElement(+params['id'])) 
    .subscribe(element => this.elementToEdit = element); 
    } 
} 

Ich bin mache es so, weil ich die gleiche Form habe, um vorhandene Elemente zu bearbeiten und neue Elemente zu erstellen, wenn ich in der ngOnInit versuche, das Element aus dem Service zu bekommen, falls ich receivi bin ng eine ID in den Parametern. Wenn ja, setze ich das Element auf elementToEdit.

Dies funktioniert soweit gut und die input nimmt den Wert, sobald das Element empfangen wird. Das Problem, das ich habe, ist, dass, wenn das passiert, die Validierung des Formulars nicht ausgelöst wird, so dass die Schaltfläche deaktiviert erscheint, auch wenn die Eingabe nicht leer ist.

Weiß jemand, wie kann ich das lösen, so wird die Validierung des Formulars ausgelöst, wenn der Wert der Eingabe geändert wird?

Answer 1

Mit den reaktiven Formen binden Sie den Wert nicht direkt in die Vorlage, dafür steht die formControlName. Stattdessen aktualisieren Sie die FormGroup Instanz und lassen Angular Aktualisierung des angezeigten Wertes, Validierungsstatus, etc .:

ngOnInit() { 
    this.route.params 
    .switchMap((params: Params) => this.recipeService.getElement(+params['id'])) 
    .subscribe(element => this.form.patchValue(element); 
} 

Ich empfehle durch die docs laufen würde: https://angular.io/docs/ts/latest/guide/reactive-forms.html