我正在尝试为Angular 2应用程序设置表单验证,即提交'如果在'选择'中未选择任何内容,则必须禁用该按钮领域。第一次它运作良好。但是当我更改值时,关闭弹出窗口并重新打开相同的弹出窗口,默认值将消失,并且提交也已启用。请帮我解决这个问题。
代码是:
<form #form="ngForm">
<div class="form-group" [class.has-error] = "adminError">
<label class="control-label" for="selectedValue">Select admin to be removed<span class="red-star">*</span>:</label>
<select class="form-control" [(ngModel)]="selectedValue" name="selectedValue" [ngModelOptions]="{standalone: true}" required>
<option color="grren" [ngValue]="admin" selected disabled>Select</option>
<option *ngFor="let admin of admins" [ngValue]= "admin.qlid">{{admin.name}} ({{admin.qlid}})</option>
</select>
</div>
<table width="80%">
<tr><td><button type="submit" class="btn btn-primary" [disabled]="form.invalid" (click)="removeAdmin(selectedValue)" data-dismiss="modal">Submit</button></td>
<td><button id="close3" type="button" class="btn btn-default" data-dismiss="modal">Close</button></td></tr>
</table>
<pre>Form Valid: {{form.valid | json}}</pre>
尊重的Typescript文件是:
import { Component } from '@angular/core';
import { AdminService } from '../../services/admin.service';
import { Admin } from '../../../Admin';
@Component({
moduleId: module.id,
selector: 'admins',
templateUrl: 'admin.component.html',
styleUrls: ['users.component.css']
})
export class AdminComponent {
constructor(private adminService:AdminService){
console.log("admin service initiated.");
}
admins: Admin[];
qlid: string;
selectedValue: string;
ngOnInit(){
console.log("admin service ngonit");
this.adminService.getAdmins()
.subscribe(admins => {
console.log("subscribe called");
this.admins = admins;
this.setPage(1);
});
}
refresh(){
this.adminService.getAdmins()
.subscribe(admins => {
console.log("subscribe called");
this.admins = admins;
});
}
removeAdmin(qlid){
this.adminService.removeAdmin(qlid)
.subscribe(data => {
this.refresh();
});
}
}
&#13;