选择字段角2的验证

时间:2017-02-09 20:17:05

标签: javascript angular typescript

我正在使用angular2@2.4.1版本。如何选择validation上的field

<div class="form-group" [class.has-error] = "schoolError">
            <label class="control-label" for="lang">Select School</label>
            <select class="form-control" name="school"  
            required #school
            [(ngModel)] = "model.school">
                <option value="default">Select a school</option>
                <option *ngFor= "let sch of school">{{sch}}</option>
            </select>
        </div>   

 <button class="btn btn-primary" 
     [disabled] = "form.invalid" type="submit">Submit</button>

基本上我想在select field无效时禁用按钮?如果没有选择值,我如何制作选择字段invalid

6 个答案:

答案 0 :(得分:4)

您可以创建一个布尔变量并将其false指定为默认值。当用户选择任何选项时,它将变为真。

https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview

<div>
  <select [(ngModel)]='selected'>
    <option value='one'>Three</option>
    <option value='two'>Two</option>
  </select>
  <button [disabled]='!selected && form.status == 'VALID'>click</button>
</div>

selected:boolean = false;

答案 1 :(得分:3)

尝试将默认选项中的值更改为空字符串:

<option [value]="">Select a school</option> 

答案 2 :(得分:2)

我遇到了同样的情况,下面的代码段看起来效果很好。

<option [ngValue]="undefined">Select a school</option>

答案 3 :(得分:1)

我相信您应该能够在按钮上实现[disabled]="checkSelectFunction()",然后创建一个函数来检查在选择字段中是否没有选择任何值。

答案 4 :(得分:1)

ngForm添加到您的表单名称时,您的验证应该有效。我认为这是缺失的,因为否则您的表单验证将按原样运行。所以你唯一需要的是在你的表格标签中加上前面提到的ngForm,如下所示:

<form #form="ngForm">

这是 plunker

答案 5 :(得分:0)

我在这里有点晚了,但对我有用的一件事就是在组件中将属性设置为null。

例如,

HTML:

<div class="form-group">
  <label for="type">Type</label>
  <select
    class="form-control"
    id="type"
    name="type"
    [(ngModel)]="appointment.typeId"
    required>
    <option *ngFor="let aType of types"
        [value]="aType.appointmentTypeId">
        {{aType.type}}
  </select>

组件:

appointment : Appointment = new Appointment(null);

模型是:

export class Appointment {
  constructor(
    public typeId: number
  ) {}
}

我希望这可以帮助像我这样的新人Angular