typescript 选择字段角度 2 的验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42146067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validation for select field angular 2
提问by Shane
I am using [email protected]release. How would i do a validationon select field?
我正在使用[email protected]发布。我将如何做一个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>
Basically i want to disable the button when the select fieldis invalid? How do i make the select field invalidwhen no value is selected?
基本上我想在select field无效时禁用按钮？未选择invalid值时如何制作选择字段？
回答by kind user
You can make a boolean variable and assign to it falseas default value. When user chooses any option, it will turn true.
您可以创建一个布尔变量并将其分配false为默认值。当用户选择任何选项时，它将变为真。
https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview
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;
selected:boolean = false;
回答by josh_in_dc
Try changing the value in your default option to an empty string:
尝试将默认选项中的值更改为空字符串：
<option [value]="">Select a school</option>
回答by Nehmia
I run into the same kind of situation and the below snippet seems to work pretty good.
我遇到了同样的情况，下面的代码片段似乎工作得很好。
<option [ngValue]="undefined">Select a school</option>
回答by Richard Ansell
I believe you should be able to implement a [disabled]="checkSelectFunction()"on your button and then create a function to check if no value is chosen in the select field.
我相信您应该能够[disabled]="checkSelectFunction()"在按钮上实现 a ，然后创建一个函数来检查是否在选择字段中没有选择任何值。
回答by AJT82
When adding ngFormto your name for your form your validation should work. I assume that is missing, because otherwise your form validation would work as is. So the only thing you would need is to add to your formtag is the aforementioned ngForm, like so:
在ngForm为表单添加名称时，您的验证应该有效。我认为这是缺失的，否则您的表单验证将按原样工作。所以你唯一需要的是添加到你的 formtag 是前面提到的ngForm，像这样：
<form #form="ngForm">
Here's a plunker
这是一个plunker
回答by Harinder
I am a little late here but the one thing that worked for me was setting the properties to null in the component.
我在这里有点晚了，但对我有用的一件事是将组件中的属性设置为 null。
For example,
例如，
HTML:
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>
Component:
零件：
appointment : Appointment = new Appointment(null);
Where model is:
模型在哪里：
export class Appointment {
constructor(
public typeId: number
) {}
}
I hope this helps someone like me who is new to Angular
我希望这可以帮助像我这样的 Angular 新手
