집 > 기사 > 웹 프론트엔드 > Angular의 반응형 양식 소개

Angular의 반응형 양식 소개

不言원래의: 2018-07-11 14:57:201863검색

이 글은 주로 Angular의 반응형 폼 도입에 대한 내용을 담고 있습니다. 이제는 모든 사람과 공유하고 있습니다.

반응형 폼은 컴포넌트 클래스에 로직과 검증 규칙을 작성하는 것입니다. 템플릿에서 제어가 수행되는 템플릿 기반 양식과 다릅니다. 반응형 양식은 유연하며 복잡한 양식 시나리오를 처리하는 데 사용할 수 있습니다. 우리는 더 많은 구성 요소 코드와 더 적은 HTML 코드를 작성하여 단위 테스트를 더 쉽게 만듭니다.

Form base 및 인터페이스

Form base

<form novalidate>
  <label>
    <span>Full name</span>
    <input
      type="text"
      name="name"
      placeholder="Your full name">
  </label>
  <p>
    <label>
      <span>Email address</span>
      <input
        type="email"
        name="email"
        placeholder="Your email address">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        name="confirm"
        placeholder="Confirm your email address">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

다음으로 구현하려는 기능은 다음과 같습니다.

이름, 이메일, 입력 상자 확인 값 바인딩
양식 유효성 검사 추가 모든 입력 상자에 함수
검증 예외 정보 표시
양식 확인에 실패하면 양식 제출이 허용되지 않습니다
양식 제출 기능

사용자 인터페이스

// signup.interface.ts
export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

ng모듈 및 반응형 양식

하자 계속해서 심도 있게 반응형 양식을 소개합니다. 형성하기 전에 @NgModule의 @angular/forms 라이브러리에 있는 ReactiveFormsModule을 가져와야 합니다.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule
  ],
  declarations: [...],
  bootstrap: [...]
})
export class AppModule {}

알림: 반응형 양식을 사용하는 경우 ReactiveFormsModule을 가져오고, 템플릿 기반 양식을 사용하는 경우 가져오기 Forms모듈.

반응형 접근 방식

위에 정의된 기본 양식을 기반으로 SignupFormComponent를 생성합니다.

signup-form.comComponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate>...</form>
  `
})
export class SignupFormComponent {
  constructor() {}
}

위 기능을 구현하기 전에 먼저 FormControl을 소개해야 합니다. FormGroup 및 FormBuilder의 개념 및 사용.

FormControl 및 FormGroup

먼저 FormControl 및 FormGroup의 개념을 소개하겠습니다.

FormControl - 단일 양식 컨트롤에 대한 지원을 제공하고 컨트롤의 값과 유효성 검사 상태를 추적하는 데 사용할 수 있는 클래스입니다. , 일련의 공개 API도 제공합니다.

사용 예:

ngOnInit() {
  this.myControl = new FormControl('');
}

FormGroup - FormControl 그룹의 값과 유효성 검사 상태를 추적하는 데 사용할 수 있는 FormControl 인스턴스 집합을 포함하고 일련의 공개 API도 제공합니다.

사용 예:

ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl(''),
    location: new FormControl('')
  });
}

이제 FormControl 및 FormGroup 인스턴스를 생성했으므로 사용 방법을 살펴보겠습니다.

<form novalidate [formGroup]="myGroup">
  Name: <input type="text" formControlName="name">
  Location: <input type="text" formControlName="location">
</form>

위 예에서는 [formGroup]을 사용하여 생성한 myGroup 개체를 바인딩해야 합니다. Except 또한 우리가 만든 FormControl 컨트롤을 바인딩하려면 formControlName 지시문을 사용해야 합니다. 현재 양식 구조는 다음과 같습니다.

FormGroup -> 'myGroup'
    FormControl -> 'name'
    FormControl -> 'location'

FormGroup 모델 구현

signup.interface.ts

export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

해당 양식 구조는 다음과 같습니다.

FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

예, 중첩된 FormGroup 컬렉션을 만들 수 있습니다! (초기 데이터 없이) 구성 요소를 업데이트해 보겠습니다.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl(''),
      account: new FormGroup({
        email: new FormControl(''),
        confirm: new FormControl('')
      })
    });
  }
}

초기 데이터를 설정하려면 위의 예와 같이 그렇게 할 수 있습니다. 일반적으로 우리는 서버에서 제공하는 API 인터페이스를 통해 양식의 초기 정보를 얻습니다.

FormGroup 모델 바인딩

이제 FormGroup 모델을 인스턴스화했으므로 이를 해당 DOM 요소에 바인딩할 차례입니다. 구체적인 예는 다음과 같습니다.

<form novalidate [formGroup]="user">
  <label>
    <span>Full name</span>
    <input
      type="text"
      placeholder="Your full name"
      formControlName="name">
  </label>
  <p formGroupName="account">
    <label>
      <span>Email address</span>
      <input
        type="email"
        placeholder="Your email address"
        formControlName="email">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        placeholder="Confirm your email address"
        formControlName="confirm">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

이제 FormGroup 및 FormControl 개체와 DOM 구조 간의 관련 정보는 다음과 같습니다.

// JavaScript APIs
FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

// DOM bindings
formGroup -> 'user'
    formControlName -> 'name'
    formGroupName -> 'account'
        formControlName -> 'email'
        formControlName -> 'confirm'

Reactive submit

템플릿 기반 양식과 마찬가지로 ngSubmit을 통해 양식 제출 로직을 처리할 수 있습니다. 출력 속성:

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="user">
  ...
</form>

반응형 오류 유효성 검사

다음으로 양식에 유효성 검사 규칙을 추가합니다. 먼저 @angular/forms에서 유효성 검사기를 가져와야 합니다. 구체적인 사용 예는 다음과 같습니다.

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

위 예를 통해 양식 컨트롤에 여러 유효성 검사 규칙이 포함된 경우 배열을 사용하여 여러 유효성 검사 규칙을 선언할 수 있음을 알 수 있습니다. 유효성 검사 규칙을 하나만 포함하는 경우 직접 선언하면 됩니다. 이렇게 하면 템플릿의 입력 컨트롤에 필수 특성을 추가할 필요가 없습니다. 다음으로, 양식 확인에 실패할 경우 양식 제출을 허용하지 않는 기능을 추가해 보겠습니다.

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
  ...
  <button type="submit" [disabled]="user.invalid">Sign up</button>
</form>

그럼 질문은 양식 컨트롤의 확인 정보를 어떻게 얻느냐는 것입니다. 다음과 같이 템플릿 기반 양식에 도입된 방법을 사용할 수 있습니다.

<form novalidate [formGroup]="user">
  {{ user.controls.name?.errors | json }}
</form>

또한 FormGroup 개체에서 제공하는 API를 사용하여 양식 컨트롤 유효성 검사의 오류 정보를 가져올 수도 있습니다.

<form novalidate [formGroup]="user">
  {{ user.get('name').errors | json }}
</form>

이제 다음을 살펴보겠습니다. 전체 코드를 보세요:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <label>
        <span>Full name</span>
        <input type="text" placeholder="Your full name" formControlName="name">
      </label>
      <p class="error" *ngIf="user.get(&#39;name&#39;).hasError(&#39;required&#39;) && 
            user.get(&#39;name&#39;).touched">
        Name is required
      </p>
      <p class="error" *ngIf="user.get(&#39;name&#39;).hasError(&#39;minlength&#39;) && 
            user.get(&#39;name&#39;).touched">
        Minimum of 2 characters
      </p>
      <p formGroupName="account">
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Your email address" formControlName="email">
        </label>
        <p
          class="error"
          *ngIf="user.get(&#39;account&#39;).get(&#39;email&#39;).hasError(&#39;required&#39;) && 
             user.get(&#39;account&#39;).get(&#39;email&#39;).touched">
          Email is required
        </p>
        <label>
          <span>Confirm address</span>
          <input type="email" placeholder="Confirm your email address" 
             formControlName="confirm">
        </label>
        <p
          class="error"
          *ngIf="user.get(&#39;account&#39;).get(&#39;confirm&#39;).hasError(&#39;required&#39;) && 
             user.get(&#39;account&#39;).get(&#39;confirm&#39;).touched">
          Confirming email is required
        </p>
      </p>
      <button type="submit" [disabled]="user.invalid">Sign up</button>
    </form>
  `
})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor() {}
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(2)]),
      account: new FormGroup({
        email: new FormControl('', Validators.required),
        confirm: new FormControl('', Validators.required)
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

함수가 구현되었지만 FormGroup 객체를 생성하는 방법이 약간 번거롭습니다. Angular 팀도 이를 알고 있으므로 위 작업을 단순화하기 위해 FormBuilder를 제공합니다.

FormBuilder로 단순화

먼저 @angular/forms에서 FormBuilder를 가져와야 합니다.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ...
}

그런 다음 FormBuilder 개체에서 제공하는 group() 메서드를 사용하여 FormGroup 및 FormControl 개체를 만듭니다.

조정 전 코드(아님) FormBuilder 사용):

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

조정된 코드(FormBuilder 사용):

ngOnInit() {
  this.user = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}

조정 전과 후의 코드를 비교해 보면 갑자기 훨씬 더 편리해진 느낌이 드나요? 업데이트 후 완성된 코드는 다음과 같습니다.

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

위 내용은 이 글의 전체 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!