角度5フォームの検証（必須）動作していません

Question

私はTypeScriptで角度5を学習しています。私は全く新しいです。私は今、フォームを構築し、それを検証しようとしています。しかし、正常に動作していません。以下の私のコードを見てください。

これは私のコンポーネントです。

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'], 
    animations: [routerTransition()] 
}) 
export class LoginComponent implements OnInit { 

    loginForm: FormGroup; 

    errors = []; 

    constructor(private fb: FormBuilder, public router: Router, private globals: GlobalsService, private http: Http) { 

    } 

    ngOnInit() { 
     this.loginForm = new FormGroup({ 
      email: new FormControl("", Validators.required), 
      password: new FormControl("") 
     }); 
    } 

    onLoggedin(formData) { 

     alert("Submit form"); 


    } 

} 

あなたは私が電子メールのフィールドに「必須」の検証属性を設定しています見ることができるように。 これは私のhtmlです。

<div class="login-page" [@routerTransition]> 
    <div class="row justify-content-md-center"> 
     <div class="col-md-4"> 
      <img src="assets/images/logo.png" width="150px" class="user-avatar" /> 
      <h1>Yo Cash Flow</h1> 
      <div class="alert alert-danger" *ngFor="let error of errors"> 
       <strong>{{ error.msg }}</strong> 
      </div> 
      <form [formGroup]="loginForm" role="form" (ngSubmit)="onLoggedin(loginForm.value)"> 
       <div class="form-content"> 
        <div class="form-group"> 
         <input type="text" name="email" formControlName="email" class="form-control input-underline input-lg" placeholder="Email"> 
         <div *ngIf="loginForm.controls['email'].errors.required" class="text-danger">Email is required</div> 
        </div> 


       </div> 
       <button type="submit" class="btn rounded-btn"> Log in </button> 
       &nbsp; 
       <a class="btn rounded-btn" [routerLink]="['/signup']">Sign up</a> 
      </form> 
     </div> 
    </div> 
</div> 

ご覧のとおり、個別にエラーを表示しようとしています。私は "必須"属性を意味する、私はこのerrors.requiredのようなエラーメッセージを取得しています。しかし、それは動作していません。しかし、私は以下のような "有効"を使用しようとしたときに動作しています。

loginForm.controls['email'].invalid 

しかし、別のエラーのために別のメッセージを表示したいので、個別にエラーを取得したいとします。どうすればいいですか？なぜ "loginForm.controls [" email "]。errors.required"を使用すると動作しないのですか？さまざまな検証ルールに対して異なるメッセージを表示する正しい方法は何ですか？

Answer 1

あなたがそうのように、errorsプロパティを使用することができます。エラーがない場合は

loginForm.controls['email'].errors 

が、それはnullを返します、それ以外の場合はそうのようなオブジェクトが返されます：あなたを

{ required : true } 

を次に人間が読める形式のエラーメッセージを返す関数を作成するだけです。

getErrorMessage(controlName, displayName) { 
    let result = ""; 
    let errors = loginForm.controls[controlName].errors; 
    if (errors.required) { 
     result += (displayName + " is required."); 
    } 
    if (errors.whatever) { 
     result += "Whatever you like"; 
    } 
    return result; 
}