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

제가 알 수 있듯이 오류를 개별적으로 표시하려고합니다. 나는 "필수"속성을 의미하고, 나는이 error.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; 
}