Angular 模板验证表单 [英] Angular template validation form

查看：19
本文介绍了Angular 模板验证表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在处理表单验证.我正在使用模板驱动的验证表单，其编码如下.它现在工作正常，但是当我尝试在输入中添加 #username = "ngModel" 和 #password = "ngModel" 以创建验证类时，它显示了一个错误.也请找出错误.

<div class="row"><div class="居中文本中心"><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">登录</button></表单>

<小时>

 不能赋值给引用或变量！在 _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26226:23)在 PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4803:24)在 convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:25676:45)在 eval (webpack-internal:///../../../compiler/esm5/compiler.js:28166:22)在 Array.forEach (<匿名>)在 ViewBuilder._createElementHandleEventFn (webpack-internal:///../../../compiler/esm5/compiler.js:28162:18)在节点.(匿名函数)(webpack-internal:///../../../compiler/esm5/compiler.js:27581:27)在 eval (webpack-internal:///../../../compiler/esm5/compiler.js:28107:22)在 Array.map (<匿名>)在 ViewBuilder._createNodeExpressions (webpack-internal:///../../../compiler/esm5/compiler.js:28106:56)

<小时>

这是我尝试过的，但它给了我一个错误

 <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="警报警报-危险">

<div *ngIf="names.errors.required">姓名为必填项.

<div *ngIf="names.errors.minlength">名称的长度必须至少为 4 个字符.

解决方案

由于您的变量名和局部变量名，您收到错误两者都一样

username 是您分配给 [(ngModel)]='username' 的变量，同时您也在尝试创建局部变量 #用户名

使用不同的名称，例如 #username2 或 #password2 ，将解决您的问题.

欲了解更多详情，请阅读:

https://scotch.io/tutorials/using-angular-2s-template-driven-forms

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>

解决方案

You are getting error because of your variable name and local variable name both are same

username is a variable that you are assigning to [(ngModel)]='username' , at the same time you are also trying to make local variable #username

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

这篇关于Angular 模板验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆