Angular의 양식 소개(1부)

양식 모듈

Angular에서 양식을 빌드하는 데 사용할 수 있는 도구 중 하나는 FormModule을 사용하는 것입니다. 이 모듈은 컨트롤러와 데이터를 연결하기 위해 보기에서 사용할 수 있는 지시문을 제공합니다. 이전 설명을 달성하기 위한 가장 일반적인 지시문은 ngModel입니다.

리액티브폼모듈

Angular에서 양식을 작성하는 더 강력한 모듈입니다.

뷰에서 컨트롤러로 또는 그 반대로 데이터를 연결하기 위해 FormControl 클래스를 사용할 수 있습니다.

FormControl 클래스를 사용하면 예를 들어 입력 필드가 채워진 경우 양식의 변경 사항을 구독할 수 있습니다. 이러한 이벤트를 구독하면 데이터를 처리하기 위해 다양한 방식으로 대응할 수 있습니다.

또한 양식 데이터의 변경 사항에 첨자를 사용하면 검증을 수행하고 관찰 가능 항목을 구현하여 데이터 흐름의 동작을 확장할 수 있습니다. 예를 들어 컨트롤러가 데이터를 수신하기 전에 또는 백엔드로 데이터를 보내기 전에 데이터를 수정할 수 있습니다.

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  emailField: FormControl;

  constructor() {
    this.emailField = new FormControl('', [
      Validators.required,
      Validators.minLength(4),
      Validators.maxLength(10),
      Validators.email,
    ]);
  }
  ngOnInit(): void {}
  registerMail() {
    if (this.emailField.valid) {
      console.log('processing subscription');
    }
  }
}

this.emailField.valueChanges.subscribe();

이전 코드를 사용하여 데이터의 변경 사항을 수신할 수 있습니다.