각도 템플릿 유효성 검사 양식

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>