Angular 응답 식 폼 구현

소개 하 다.
Angular 는 모두 3 개의 폼 실현 방식 을 제 공 했 는데 그것 이 바로템 플 릿 구동 폼(템 플 릿 구동 폼),Reactive Forms(응답 식 폼),동적 폼(동적 폼)본 고 는 응답 식 폼 만 소개 한다.
응답 표 는 무엇 입 니까?사실은 우리 가 예전 에 JQuery 나 다른 프레임 워 크 로 이 루어 진 사고 와 차이 가 많 지 않 습 니 다.바로 HTML 로 데 이 터 를 표시 한 다음 에 일정한 검증 기,검증 규칙 과 검증 제시 어 를 정의 하고 사건 을 통 해 검 사 를 촉발 한 후에 통과 하지 못 한 디 스 플레이 제시 어 를 검사 하 는 것 입 니 다.Angular 만 사용 하면 우 리 는 Angular 가 제공 하 는 문법 으로 이 검증 과정 을 실현 합 니 다.
쓰다
다음은 코드 예 를 통 해 응답 식 폼 을 어떻게 사용 하 는 지 소개 합 니 다.
응답 식 폼 모듈 도입
응답 식 폼 을 사용 하려 는 모듈 에 응답 식 폼 모듈 을 도입 합 니 다.예 를 들 어 글 모듈 에서 응답 식 폼 을 사용 하려 면 imports 에 ReactiveForms Module 을 추가 해 야 합 니 다.코드 는 다음 과 같다.

@NgModule({
 imports: [
 RouterModule,
 RouterModule.forChild(articleRoutes),
 SharedModule,
 ReactiveFormsModule,
 NgbModule.forRoot()
 ],
 declarations: [
 HomeComponent,
 DetailComponent,
 CommentComponent,
 CommentViewComponent
 ],
 providers: [
 HomeService,
 DetailService,
 CommentService
 ]
})
export class ArticleModule { }

검사 기 코드 작성
우선,여기 있 는 양식 은 nickname,email,content 등 세 개의 필드 가 있 습 니 다.nickname 은 필수 검사 기 를 추가 하고 이메일 은 필수 와 메 일 형식 검사 기 를 추가 하 며 content 는 필수 검사 기 를 추가 합 니 다.
먼저 CommentComponent 에 FormBuilder 대상 을 주입 하고 comment Form 폼 그룹 을 추가 하 며 댓 글 대상 comment 를 만 듭 니 다.

public commentForm: FormGroup;
public comment: Comment = new Comment();

constructor(private formBuilder: FormBuilder){}

검사 기 를 정의 하 는 제시 어 vaidationMessages,formErrors 는 템 플 릿 에 표 시 된 제시 어 입 니 다.제시 어 는 vaidationMessages 에서 나 옵 니 다.

public formErrors = {
 "nickname": "",
 "email": "",
 "content": "",
 "formError": ""
}

public validationMessages = {
 "nickname": {
 "required": "      ",
 },
 "email": {
 "required": "      ",
 "pattern": "          "
 },
 "content": {
 "required": "      "
 }
}

구성 요소 가 시 작 된 함수 에서 폼 을 구성 합 니 다.이 때 필드 마다 검사 기 를 추가 하고 언제 검사 가 실 행 될 지 바 인 딩 합 니 다.여기 서 우 리 는 값 이 바 뀔 때 실 행 됩 니 다.

ngOnInit(): void {
 this.buildForm();
}

private buildForm() {
 this.commentForm = this.formBuilder.group({
 "nickname":[
  this.comment.nickname,
  [
  Validators.required
  ]
 ],
 "email": [
  this.comment.email,
  [
  Validators.required,
  Validators.pattern("^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$")
  ]
 ],
 "content": [
  this.comment.content,
  [
  Validators.required
  ]
 ]
 });
 this.commentForm.valueChanges.subscribe(data => this.onValueChanged(data));
 this.onValueChanged();
}

onValueChanged()방법 은 그 필드 의 검증 이 통과 되 지 않 았 다 는 판단 을 실현 한 다음 에 이 필드 의 vaidationMessages 제시 어 를 formErrors 에 할당 합 니 다.템 플 릿 에 formErrors.email 등 필드 가 비어 있 지 않 으 면 변경 내용 을 표시 합 니 다.즉,검사 기의 제시 어 입 니 다.

onValueChanged(data?: any) {
 if (!this.commentForm) {
 return;
 }
 const form = this.commentForm;
 for (const field in this.formErrors) {
 this.formErrors[field] = '';
 const control = form.get(field);
 if (control && control.dirty && !control.valid) {
  const messages = this.validationMessages[field];
  for (const key in control.errors) {
  this.formErrors[field] += messages[key] + ' ';
  }
 }
 }

}

HTML 템 플 릿 코드
우리 가 주목 해 야 할 것 은[formGroup]="comment Form",novalidate,formControl Name="nickname",그리고*ngIf="formErrors.nickname"이라는 몇 가지 점 입 니 다.구체 적 인 점 을 가리 키 는 것 이 아니 라 이 문법 들 의 모든 부분 을 중점적으로 보 는 것 입 니 다.당신 이 실현 할 때 당신 의 코드 에 따라 수정 해 야 합 니 다.
또 하 나 는(ngSubmit)="sendComment()"이 폼 이 제출 을 눌 렀 을 때 호출 하 는 함 수 를 정의 합 니 다.

<form [formGroup]="commentForm" (ngSubmit)="sendComment()" role="form" novalidate>
 <div class="control-group">
 <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.nickname}">
  <label>{{ 'comment.nickname' | translate }}</label>
  <input formControlName="nickname" type="text" class="form-control" placeholder="{{ 'comment.nickname' | translate }}">
  <p *ngIf="formErrors.nickname" class="help-block text-danger">
  {{ formErrors.nickname }}
  </p>
 </div>
 </div>
 <div class="control-group" >
 <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.email}">
  <label>{{ 'comment.email' | translate }}</label>
  <input formControlName="email" type="email" class="form-control" placeholder="{{ 'comment.email' | translate }}">
  <p *ngIf="formErrors.email" class="help-block text-danger">
  {{ formErrors.email }}
  </p>
 </div>
 </div>
 <div class="control-group">
 <div class="form-group floating-label-form-group controls" [ngClass]="{'has-error': formErrors.content}">
  <label>{{ 'comment.content' | translate }}</label>
  <textarea formControlName="content" rows="5" class="form-control" placeholder="{{ 'comment.content' | translate }}"></textarea>
  <p *ngIf="formErrors.content" class="help-block text-danger">
  {{ formErrors.content }}
  </p>
 </div>
 </div>
 <p *ngIf="formErrors.formError" class="help-block text-danger">
 {{ formErrors.formError }}
 </p>
 <br>
 <div id="success"></div>
 <div class="form-group">
 <button [disabled]="commentForm.invalid" type="submit" class="btn btn-secondary" >{{ 'comment.submit' | translate }}</button>
 </div>
</form>

GitHub 코드
참고 문장
Reactive Forms
효과 도

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.