我有一个angular 2应用程序（RC.4），但是表单验证存在问题。
我的模板中包含以下表单代码。
<div class='modal'>
<form #modalForm='ngForm'>
<div class='heading'>
<h4>{{_title}}</h4>
<div class='close-icon' (click)='close()'></div>
</div>
<div class='body'>
<input type='text' name='projectName' [(ngModel)]='projectName' required placeholder='Give your project a name...' id='focusOnMe'>
</div>
<div class='controls'>
<button class='btn btn-secondary' (click)='close()'>Cancel</button>
<button type='submit' class='btn' (click)='sendAction()' [disabled]='!modalForm.form.valid'>{{_action}}</button>
</div>
</form>
</div>
如您所见，我命名了form元素并将其设置为ngForm，然后在输入中包含了必需的属性，最后在Submit按钮上，我说了[disabled] =！modalForm.form.valid，但是出于某种原因，该表单始终是即使所需的输入为空，也标记为有效。我在这里想念什么？
对于Angular 2 RC 4：
您缺少告诉表单您的“ projectName”输入应作为表单验证的一部分的部分。只需添加“ ngControl ='inputId'”：
<input type='text'
name='projectName'
ngControl="projectName"
[(ngModel)]='projectName'
required
placeholder='Give your project a name...'
id='focusOnMe'>
对于Angular 2.0 Final：
<form [formGroup]="modalForm">
将“ formControlName”添加到您的控件中：
<input type='text' name='projectName' formControlName="projectName" [(ngModel)]='projectName' required placeholder='Give your project a name...' id='focusOnMe'>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句