【发布时间】：2017-09-08 20:52:34
【问题描述】：
我的 HTML 组件中有以下 From：
<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.form.valid && searchPowerPlants()" #f="ngForm" novalidate>
<div class="form-group col-xs-3" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }">
<label for="powerPlantName">PowerPlant Name</label>
<input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
</div>
<div class="form-group col-xs-3" [ngClass]="{ 'has-error': f.submitted && !powerPlantType.valid }">
<label for="powerPlantType">PowerPlant Type</label>
<select class="hideLabel form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType" (change)="selectName();">
<option selected="" value="">--Select Type--</option>
<option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
{{ powerPlantType }}
</option>
</select>
</div>
<div class="form-group col-xs-3" [ngClass]="{ 'has-error': f.submitted && !organizationName.valid }">
<label for="organizationName">Organization Name</label>
<input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrganization" #organizationName="ngModel" />
</div>
<div class="form-group col-xs-3" [ngClass]="{ 'has-error': f.submitted && !powerPlantStatus.valid }">
<label for="powerPlantStatus">PowerPlant Active Status</label>
<input type="text" class="form-control-small" name="powerPlantStatus" [(ngModel)]="model.powerPlantStatus" #powerPlantStatus="ngModel" />
</div>
<div class="form-group col-md-3 col-xs-4">
<button [disabled]="loading" class="btn btn-primary">Search For PowerPant's...</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
<div class="form-group col-md-3 col-xs-3">
<button class="btn btn-primary" (click)="reset(f)">Reset Search Criteria</button>
</div>
</form>
对应的Typescript如下：
export class HomeComponent implements OnInit {
// Represents the PowerPlantTypes
powerPlantTypes = ['RampUpType', 'OnOffType'];
// Represents the search form
model: any = {};
// currentUser: User;
// represents the list of PowerPlant data
powerPlants: PowerPlant[];
users: User[] = [];
constructor(private userService: UserService, private powerPlantService: PowerPlantService) {
// this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}
ngOnInit() {
this.allPowerPlants();
}
selectName() {
alert(this.model.powerPlantType);
}
searchPowerPlants(): void {
const powerPlantSearchParams = new PowerPlantSearchParams(
this.model.powerPlantType,
this.model.powerPlantOrganization,
this.model.powerPlantName,
this.model.page,
this.model.powerPlantStatus);
this.powerPlantService.searchPowerPlants(powerPlantSearchParams).subscribe(result => {
this.powerPlants = <PowerPlant[]> result;
});
}
allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
this.powerPlantService.allPowerPlants(onlyActive, page).subscribe(result => {
this.powerPlants = <PowerPlant[]> result;
});
}
}
当我尝试使用重置按钮重置表单时，我在控制台中看到大量错误。一个这样的错误如下所示：
TypeError: Cannot read property 'valid' of undefined
at Object.View_HomeComponent_0._co [as updateDirectives] (HomeComponent.html:11)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
at checkAndUpdateView (core.es5.js:12245)
at callViewAction (core.es5.js:12610)
at execComponentViewsAction (core.es5.js:12542)
at checkAndUpdateView (core.es5.js:12251)
at callViewAction (core.es5.js:12610)
at execEmbeddedViewsAction (core.es5.js:12568)
at checkAndUpdateView (core.es5.js:12246)
at callViewAction (core.es5.js:12610)
所以 HomeComponent.html 中的第 11 行就是这一行：
<input type="text" class="form-control-small" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
这里有什么问题？这是很多人可能会遇到的常见问题！谁能帮忙！
【问题讨论】：
标签： html forms angular typescript