选择非空值

时间:2017-04-27 06:33:46

标签: javascript angular angular2-forms

我正在尝试为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>

屏幕截图: enter image description here

尊重的Typescript文件是:

&#13;
&#13;
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;
&#13;
&#13;

0 个答案:

没有答案