gpt4 book ai didi

javascript - 简单的模板驱动形式 Angular4 给出错误

转载 作者:行者123 更新时间:2023-11-30 11:13:17 25 4
gpt4 key购买 nike

制作一个简单的“模板驱动表单”虽然我没有做任何特别的事情,但我收到了错误。这是一个简单的表单,只有一个输入和一个必需的验证。就这样。有人可以帮我吗?

abc.component.html

<form #customForm="ngForm" (ngSubmit)="alpha(customForm)">

<input type="text" name="firstName" ngModel #firstName="ngModel" required><br/>

<div class="red" *ngIf="customForm.firstName.touched">
<div *ngIf="customForm.firstName.errors.required">Input field is required!</div>
</div>

<button type="submit" [disabled]="customForm.invalid">Submit</button>

</form>

错误:

Cannot read property 'touched' of undefined

快照:

enter image description here

有人可以指出,我到底做错了什么吗?

最佳答案

由于您已经通过执行 #firstName="ngModel" 声明了一个模板并为其分配了 ngModel 的值,所以 firstName模板变量将已经有 firstName FormControl。所以你可以像这样简单地应用检查:*ngIf="firstName.touched"

像这样改变你的模板:

<form 
#customForm="ngForm"
(ngSubmit)="alpha(customForm)">
<input
type="text"
name="firstName"
ngModel
#firstName="ngModel"
required>
<br/>
<div
class="red"
*ngIf="firstName.touched">
<div
*ngIf="firstName.errors.required">
Input field is required!
</div>
</div>
<button
type="submit"
[disabled]="customForm.invalid">
Submit
</button>
</form>

这是一个 Working StackBlitz供您引用。

关于javascript - 简单的模板驱动形式 Angular4 给出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52722962/

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