角度模板验证表格 [英] Angular template validation form
问题描述
我正在进行表单验证.我正在使用模板驱动的验证表,其编码如下.它现在可以正常工作,但是当我尝试在输入中添加#username = "ngModel" and #password = "ngModel
以创建验证类时,它向我显示了一个错误.请也查找该错误.
I am working on the form validation. I am using template-driven validation form whose coding is below. Its working fine now but when I try to add #username = "ngModel" and #password = "ngModel
" in input to create validation classes it's showing me an error. Please find the error also.
<div class="container">
<div class="row">
<div class="centering text-center">
<div class="login-cont col-md-4 col-md-offset-4 vcenter">
<form id="login_form" name="login-form" #f="ngForm" role="form" (ngSubmit)="f.form.valid && login()" novalidate>
<input id="username" [(ngModel)]="username" name="username" required class="form-control" type="text" placeholder="Username" >
<input id="userPassword" class="form-control" required type="password" name="userPassword" required placeholder="Password" [(ngModel)]="password" >
<button type="submit" class="btn login-btn">Login</button>
</form>
</div>
</div>
</div>
</div>
Cannot assign to a reference or variable!
at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26226:23)
at PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4803:24)
at convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:25676:45)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28166:22)
at Array.forEach (<anonymous>)
at ViewBuilder._createElementHandleEventFn (webpack-internal:///../../../compiler/esm5/compiler.js:28162:18)
at nodes.(anonymous function) (webpack-internal:///../../../compiler/esm5/compiler.js:27581:27)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28107:22)
at Array.map (<anonymous>)
at ViewBuilder._createNodeExpressions (webpack-internal:///../../../compiler/esm5/compiler.js:28106:56)
这是我尝试过的方法,但它给我一个错误
This is what I tried but it gives me an error
<input id="username" class="form-control" type="text" required name="username" placeholder="Username" [(ngModel)]="username" minlength="4" #names="ngModel">
<div *ngIf="names.invalid && (names.dirty || names.touched)"
class="alert alert-danger">
</div>
<div *ngIf="names.errors.required">
Name is required.
</div>
<div *ngIf="names.errors.minlength">
Name must be at least 4 characters long.
</div>
推荐答案
由于您的
variable name
和local variable name
,您遇到了错误 都一样
You are getting error because of your
variable name
andlocal variable name
both are same
username
是要分配给[(ngModel)]='username'
的变量,与此同时,您还尝试使局部变量#username
username
is a variable that you are assigning to [(ngModel)]='username'
, at the same time you are also trying to make local variable #username
使用其他名称(例如#username2
或#password2
)将解决您的问题.
Use different name like #username2
or #password2
, will solve your problem.
有关更多详细信息,请参阅:
For more details read :
https://scotch.io/tutorials/using-angular- 2s-template-driven-forms
这篇关于角度模板验证表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!