下面是我在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按钮答案 0 :(得分：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循环使其更简洁一些。我之所以选择不这样做是因为每一行都发生了这种模式。
您还可以使用formControl来获取每个.value的值。
// 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