gpt4 book ai didi

Angular 2 表单验证不起作用

转载 作者:太空狗 更新时间:2023-10-29 19:35:25 25 4
gpt4 key购买 nike

我有一个 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>

如您所见,我为表单元素命名并将其设置为 ngForm,然后在输入中包含必需的属性,最后在提交按钮上我说 [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:

  1. 将 [formGroup] 添加到您的表单中:

<form [formGroup]="modalForm">

  1. 将“formControlName”添加到您的控件中:

    <input type='text'
    name='projectName'
    formControlName="projectName"
    [(ngModel)]='projectName'
    required
    placeholder='Give your project a name...'
    id='focusOnMe'>

关于Angular 2 表单验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39108168/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com