각도 4 폼 유효성 검사 및 오류 메시지

Question

응용 프로그램의 양식에 대한 유효성 검사를 구현해야합니다. 각도 4를 사용 중입니다. 신청서에 10 개의 양식이 더 있습니다. 제 질문이 유효한지 모르겠습니다. 나는이 구현과 정말로 혼란 스럽다.

내 질문 : 전자 메일, 전화 번호 등과 같은 필수 및 유효성 검사와 같은 양식 필드에 유효성 검사를 추가해야합니다. 사용자가 양식을 입력하면 사용자가 일부 필드를 알고있어 다른 필드를 채워야 할 필요가 있는지 모를 수 있습니다. . 그러나 유효한 필드를 저장하고 오류 메시지를 양식에 표시해야합니다. 내가 4 각도 다시 폼 작업을 할 때마다 나는 ReactiveFormsModule을 사용하는 것이 좋습니다 nodejs

Answer 1

로 끝 사용하고 프런트 엔드에서 구현할 수있는 방법

. 익숙하지 않다면 문서를 확인하십시오. 그러나 매우 간단하기 때문에 많은 문제가 있어서는 안됩니다.

form: FormGroup; 

constructor(formBuilder: FormBuilder){ 
    this.form = formBuilder.group({ 
     name: ['', Validators.required], 
     lastName: '', 
     email: ['', [Validators.required, Validators.email]] 
    }); 
} 

그래서 기본적으로 여기에 무슨 일이 일어나고 있는지 반응성 양식 작업을 할 때 우리가 FormGroup 인스턴스를 필요로한다는 것이다. FormBuilder 클래스를 사용하고 group 메소드를 호출합니다.이 메소드는 생성하려는 객체의 객체를 취하여 FormGroup 인스턴스를 반환합니다. 우리가 전달하는 객체의 각 속성은 FormGroup의 FormControls로 알려져 있으므로이 예제에서는 name, lastName 및 email이라는 세 개의 FormControl을 사용하여 FormGroup을 선언합니다.

이러한 FormControls의 값은 초기화에 사용되며 해당 FormControl의 실제 값이거나 첫 번째 요소가 FormControl의 값이되고 두 번째 요소가 ValidatorFn이거나 배열이 될 수 있습니다. ValidatorFn.

보시다시피 FormControl의 이름은 name: ['', Validators.required]입니다. 즉, 초기 값은 빈 문자열이며이 FormControl이 필요합니다. lastName은 해당 필드에 대한 유효성 검사를 원하지 않기 때문에 단순히 빈 문자열입니다. 이 FormControl에는 하나 이상의 유효성 검사기가 필요하므로 전자 메일이 더 흥미 롭습니다. 그래서 배열에 전달합니다.

그리고 지금, 우리의 템플릿에이 모든 것을 구현하는 것은 물론

<form [formGroup]="form"> 
    <div> 
     <input formControlName="email"> 
     <div *ngIf="form.get('email').hasError('required') && form.get('email').touched">This field is required</div> 
     <div *ngIf="form.get('email').hasError('email') && form.get('email').touched">Invalid email format.</div> 
    </div> 
    ... 

아주 쉽게 그리고 당신은 사용자가 유효 때까지 양식을 제출 할 수 있도록 허용하지 않으려면 : <button [disabled]="form.invalid">Save</button