Question

我正在进行表单验证。我正在使用模板驱动的验证表单，其编码如下。它的工作正常，但是当我尝试添加#username = "ngModel" and #password = "ngModel＆＃34;在输入中创建验证类时，它显示了一个错误。请找错误。

<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)

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

   <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>

Answer 1

由于您的variable name和local variable name，您收到了错误消息两者都相同

username是您要分配给[(ngModel)]='username'的变量，同时您还尝试制作本地变量#username

使用#username2或#password2之类的其他名称，可以解决您的问题。

有关详细信息，请阅读：

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

Answer 2

FormBuilder可以帮到你。

＆＃13;

export class MyComp {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      username: ['', [Validator.required]],
      userPassword: ['', [Validator.required]]
    });
  }

＆＃13;

<div class="container">
  <div class="row">
    <div class="centering text-center">
      <div class="login-cont col-md-4 col-md-offset-4 vcenter">
        <form [formGroup]="myForm" id="login_form"(submit)="login()">
          <input id="username" class="form-control" type="text" placeholder="Username" >
          <input id="userPassword" class="form-control" type="password" placeholder="Password">
          <button type="submit" class="btn login-btn" [disabled]="myForm.invalid">Login</button>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

角度模板验证表单

2 个答案: