angular - 我如何以编程方式更改 Angular 2 中表单控件的原始和有效状态？我正在使用 ngModel 绑定(bind)数据

Question

下面是我在 Angular2 组件中的 html:

<form #myForm="ngForm">
<div>
   <input #txtCityLocation="ngModel" id=txtCityLocation name=txtCityLocation type="text"  [(ngModel)]="city" required >
   <div [hidden]="txtCityLocation.valid || txtCityLocation.pristine">City is required</div>
   <label for="txtState">STATE</label>               
   <input #txtState="ngModel" id=txtState name=txtState type="text"  [(ngModel)]="state" >
   <label for="txtCountry" >COUNTRY</label>               
   <input #txtCountry="ngModel" id=txtCountry name=txtCountry type="text"  [(ngModel)]="country" required >
   <div [hidden]="txtCountry.valid || txtCountry.pristine">Country is required</div>
   <label for="txtPostalCode" >POSTAL CODE</label>               
   <input #txtPostalCode="ngModel" id=txtPostalCode name=txtPostalCode type="text"  [(ngModel)]="postalcode" required >
   <div [hidden]="txtPostalCode.valid || txtPostalCode.pristine">Postcode is required</div>
</div>
<button type="button" (click)="register($event)" name="btnReady" [disabled]="!myForm.valid">Ready</button>

和代码:

export class MyComponent {
    public googleLocation: GoogleLocation = new GoogleLocation();

    private city : string;
    private state : string;
    private country : string;
    private postalcode : string;

    private onNotify(googleLocation: GoogleLocation) {
        this.googleLocation = googleLocation;               // setting a valid location like Mumbai,Maharashtra,India
        this.city = this.googleLocation.Locality;           // I want txtCityLocation.valid = true and txtCityLocation.pristine = false
        this.state = this.googleLocation.Region;            // I want txtState.valid = true and txtState.pristine = false
        this.country = this.googleLocation.CountryName;     // I want txtCountry.valid = true and txtCountry.pristine = false
        this.postalcode = this.googleLocation.PostalCode;   // I want txtPostalCode.valid = true and txtPostalCode.pristine = false
    }

    Reset() : void
    {
        this.googleLocation = new GoogleLocation();         // Assigning blank values
        this.city = this.googleLocation.Locality;           // I want txtCityLocation.pristine = true
        this.state = this.googleLocation.Region;            // I want txtState.pristine = true
        this.country = this.googleLocation.CountryName;     // I want txtCountry.pristine = true
        this.postalcode = this.googleLocation.PostalCode;   // I want txtPostalCode.pristine = true so that i can display error message in proper situation

    }
}

正如在点击重置按钮的评论中提到的，我的所有数据字段都设置为空白，但这不会改变 control.pristine 或 control.touched 和 control.valid 属性。

我希望当用户单击“重置”按钮时，表单会恢复为新表单。并在正确的条件下显示正确的错误消息。

如代码所示，当 control.pristine = false 和 control.valid = false 时，我会显示错误消息。 即，当第一次加载表单或用户单击重置按钮时，不应显示错误消息。 当通过代码设置 control.valid = true 设置数据时，应启用 Ready 按钮。

Answer 1

我认为您最好使用 formGroup，因为它可以非常简单地将 formControls 传输到变量并在您的代码中修改控件。

有多种方法可以实现这一点。您可能会找到自己喜欢的不同方式。

这是使用 formGroup 和 formControls 编写的代码示例。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
// import GoogleLocation

@Component({
    selector: 'my-app',
    template: `
    <form [formGroup]="formData">
        <div>
            <input id=txtCityLocation formControlName=city type="text" required >
            <div [hidden]="city.valid || city.pristine">City is required</div>

            <label for="txtState">STATE</label>               
            <input id=txtState formControlName=state type="text" >

            <label for="txtCountry" >COUNTRY</label>               
            <input id=txtCountry formControlName=country type="text" required >
            <div [hidden]="country.valid || country.pristine">Country is required</div>

            <label for="txtPostalCode" >POSTAL CODE</label>               
            <input id=txtPostalCode formControlName=postalcode type="text" required >
            <div [hidden]="postalcode.valid || postalcode.pristine">Postcode is required</div>
        </div>
        <button type="button" (click)="register($event)" name="btnReady" [disabled]="!formData.valid">Ready</button>
    </form>`
})
export class MyComponent {
    public googleLocation: GoogleLocation = new GoogleLocation();

    private city: FormControl;
    private state: FormControl;
    private country: FormControl;
    private postalcode: FormControl;

    private formData;

    constructor() {

        // Create Form Group with all input fields.
        this.formData = new FormGroup({
            city: new FormControl(null),
            state: new FormControl(null),
            country: new FormControl(null),
            postalcode: new FormControl(null)
        })

        // Assign form controls to variables.
        this.city = this.formData.controls.city;
        this.state = this.formData.controls.state;
        this.country = this.formData.controls.country;
        this.postalcode = this.formData.controls.postalcode;

    }

    private onNotify(googleLocation: GoogleLocation) {
        this.googleLocation = googleLocation;               // setting a valid location like Mumbai,Maharashtra,India

        this.city.setValue(this.googleLocation.Locality);   // Set city value equal to googleLocation.Locality
        this.city.markAsDirty();                            // Mark State as dirty (pristine = false)

        this.state.setValue(this.googleLocation.Region);    // Repeat for each field.
        this.state.markAsDirty();

        this.country.setValue(this.googleLocation.CountryName);
        this.country.markAsDirty();

        this.postalcode.setValue(this.googleLocation.PostalCode);
        this.postalcode.markAsDirty();
    }

    Reset() : void
    {
        this.googleLocation = new GoogleLocation();         // Assigning blank values

        this.city.setValue(null);                           // Set city value equal to null
        this.city.markAsPristine();                         // Mark State as pristine (dirty = true)

        this.state.setValue(null);                          // Repeat for each field.
        this.state.markAsPristine();

        this.country.setValue(null);
        this.country.markAsPristine();

        this.postalcode.setValue(null);
        this.postalcode.markAsPristine();

    }

}

请记住，您可以重构此代码以利用 for 循环来使其不那么冗长。我选择不这样做是为了谨慎对待每行发生的事情。

您还可以使用 .value 从每个 formControl 中获取值。

// Example, both will return the current value of the city input.

this.city.value

    //or

this.form.controls.city.value

这是指向 Angular 2 文档的链接，该文档还提供了 FormGroup 和 FormControl 的示例。 https://angular.io/docs/ts/latest/api/forms/index/FormControlName-directive.html

您可能还想查看 AbstractControl。它是 FormGroup 和 FormControl 的基类，主要是我提供的代码中使用的函数的来源。 https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html