角度テンプレート検証フォーム

Question

私はフォームの検証に取り組んでいます。私は以下のコーディングがあるテンプレート駆動検証フォームを使用しています。私はそれは私にエラーを見せて検証クラスを作成するために入力して「#username = "ngModel" and #password = "ngModelを追加しようとする。また、エラーを見つけてください。その作業罰金は今はなく

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

---

これは何をあるI試みたが、あなたを助けることができるそれは私に

<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

あなたは同時に、

username

はあなたが [(ngModel)]='username'に割り当てる変数の両方が同じであるため、あなたの variable nameと local variable name のエラーを取得しているあなたローカル変数を作成しようとしています #username

#username2または#password2のような別の名前を使用すると、問題が解決します。詳細については

を読む：

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

Answer 2

FormBuilderエラーが発生します。

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

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