지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Angular의 반응형 양식 소개

不言
풀어 주다： 2018-07-11 14:57:20
원래의
1862명이 탐색했습니다.

이 글은 주로 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 중국어 홈페이지를 참고해주세요!

관련 추천:

vue.js 기반 대화 플러그인 art-dialog-vue2.0의 출시 내용

일반적으로 사용되는 AngularJ와 Angular의 명령어 작성 방법의 차이점

에서 가져오기/게시

위 내용은 Angular의 반응형 양식 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript
원천：php.cn
이전 기사：vue.js 기반 대화 플러그인 art-dialog-vue2.0 콘텐츠 출시 다음 기사：Node의 기본 개념 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿