Angular 8 간단 한 폼 검증 의 실현 예시
바보 검사
Antd 에서 demo 직접 복사
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group nzPrefixIcon="user">
<input formControlName="userName" nz-input placeholder="Username" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your Password!">
<nz-input-group nzPrefixIcon="lock">
<input formControlName="password" nz-input type="password" placeholder="Password" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control>
<button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
</nz-form-control>
</nz-form-item>
</form>
validateForm!: FormGroup;
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
});
}
이러한 폼 검사 가 비교적 단일 하거나 요구 가 비교적 낮 습 니 다.보통 required 검사 이 고 오류 정보 알림 도 고정 적 으로 변 하지 않 습 니 다.지능 화 검사
양식 이 일단 구체 적 인 세부 검사 나 복잡 한 업무 가 뒤 섞 이기 시작 하면 검사 힌트 는 반드시 정확 하고 뚜렷 해 야 한다.
userName
예 를 들 어 필수 항목 을 제외 하고 특정한 형식 에 부합 되 거나 지정 한 메 일 형식 등 이 필요 하 다.그러면 검 사 는 오류 유형 을 동시에 반영 해 야 한다.본 예 는 사용자 이름 에 길이 가 있다 고 가정 하여 시연 해 야 한다.
<nz-form-control [nzErrorTip]="getErrTipByField('userName')">
<nz-input-group nzPrefixIcon="user">
<input formControlName="userName" nz-input placeholder="Username" />
</nz-input-group>
</nz-form-control>
export class SimpleFormComponent implements OnInit {
validateForm: FormGroup;
errMessageMap = {};
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.errMessageMap = {
userName: {
required: 'please input your name!',
minlength: 'please input at least least 5 character'
},
password: {
required: 'please input your password!'
}
};
this.validateForm = this.fb.group({
userName: [null, [Validators.required, Validators.minLength(5)]],
password: [null, [Validators.required]],
remember: [true]
}, { updateOn: 'change' });
}
submitForm(): void {
if (this.validateForm.controls) {
for (const i in this.validateForm.controls) {
if (this.validateForm.controls[i]) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
}
}
getErrTipByField(fieldName) {
const errors = this.validateForm.get(fieldName).errors;
let errMsg = '';
for (const key in errors) {
if (errors.hasOwnProperty(key)) {
errMsg += this.errMessageMap[fieldName][key];
}
}
return errMsg;
}
}
데이터 대상 을 구축 하여 서로 다른 필드 에서 서로 다른 오류 유형의 오류 알림 을 만족 시 키 고 업무 수요 에 따라 모든 오류 정 보 를 표시 하거나 업무 우선 순위 에 따라 표시 할 지 여 부 를 결정 합 니 다.기타 세부 사항
폼 검사 시 기 를 설정 할 수 있 습 니 다.기본 값
change
,선택 가능blur
,submit
폼 검증 이 정확 합 니 다.체크 번 호 를 알려 주 려 면 속성 을 추가 할 수 있 습 니 다nzHasFeedback
submit 에서 그 코드 는 폼 을 다시 검증 한 것 입 니 다.일반 검증 에 서 는 필요 하지 않 습 니 다.동적 폼 검증 은 사용자 정의 폼 서비스 와 결합 하여 보 여 줍 니 다.
여기 서 Angular 8 간단 한 폼 검증 의 실현 사례 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Angular 8 폼 검증 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Upgrading to Angular8 when your app uses firebaseui : 'Package "firebaseui-angular"has an incompatible peer dependency'Commands to upgrade from Angular7 to Angular8. 1. npm install -g @angular/cli@latest2. ng update @angular/cli @angular/c...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.