我正在使用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
?
答案 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