Angular manuell ngModel aktualisieren und Formular auf schmutzig oder ungültig setzen?

Question

Ich habe ein Formular und ein darunter liegendes Modell wie diese

Von Komponente

myTextModel: string; 
updateMyTextModel(): void { 
    this.myTextModel = "updated model value"; 
    //todo- set form dirty (or invalid or touched) here 
} 

Html Vorlage

<form #testForm="ngForm" id="testForm"> 
    <input type="text" id="myText" [(ngModel)]="myTextModel" name="myText" #myText="ngModel"> 
</form> 
<button (click)="updateMyTextModel()">Update myTextModel</button> 
<div *ngIf="testForm.dirty">testForm diry</div> 
<div *ngIf="testForm.touched">testForm touched</div> 

Wie kann ich die Form von Code berühren oder verschmutzte?

Hinweis: In diesem Beispiel verwende ich eine Schaltfläche, um die Modelländerung auszulösen, aber ich kann das Modell auch auf andere Weise aktualisieren, z. B. in einem Rückruf von einer Web-API-Async-Anfrage.

Answer 1

Lösung verwenden:

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { Component, ViewChild } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form #testForm="ngForm" id="testForm"> 
     <input type="text" id="myText" [(ngModel)]="myTextModel" name="myText" #myText="ngModel"> 
    </form> 
    <button (click)="updateMyTextModel()">Update myTextModel</button> 
    <div *ngIf="testForm.dirty">testForm diry</div> 
    <div *ngIf="testForm.touched">testForm touched</div> 
    `, 
}) 
export class App { 

    @ViewChild('testForm') test: any; 

    updateMyTextModel(){ 
    this.test.control.markAsTouched(); 
    this.test.control.markAsDirty(); 

    } 

    constructor() { 
    console.log(this.test); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule,FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Plunkr arbeiten:

https://plnkr.co/edit/YthHCEp6iTfGPVcNr0JF?p=preview

Answer 2

sollte diese Arbeit:

@ViewChild('testForm') testForm; 


updateMyTextModel(): void { 
    this.myTextModel = "updated model value"; 
    this.myForm.form.markAsDirty(); 
} 

Answer 3

Warum nicht Reactive Formulare verwenden (FormGroup)

let testForm = new FormGroup({ 
    myText: new FormControl('initial value') 
}) 

<form [formGroup]="testForm"> 
    <input type="text" formControlName="myText"> 
</form> 

<button (click)="updateMyTextModel()">Update myTextModel</button> 
<div *ngIf="testForm.dirty">testForm diry</div> 
<div *ngIf="testForm.touched">testForm touched</div> 

In Ihrer Funktion Sie markAsDirty() basierend auf, was Bedingung Sie verwenden können.

updateMyTextModel(): void { 
    this.myTextModel = "updated model value"; 
    if (// some condition) { 
     this.testForm.markAsDirty(); 
    } 
} 

Um einzelne Formular-Steuerelemente als schmutzig/berührt gesetzt, Sie

this.testForm.get('myText').markAsDirty(); 
this.testForm.get('myText').markAsTouched();