Angular Form FormGroup

아래는 Angular에서 <form> 태그를 활용하고 유효성 검사를 수행하는 예시 코드입니다. 코드를 분석하고 설명하겠습니다.

<!-- form.component.html -->
<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required [(ngModel)]="formData.name">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required email [(ngModel)]="formData.email">
  </div>
  <div>
    <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
  </div>
</form>

위의 코드는 <form> 요소를 사용하여 Angular에서 폼을 생성하고 유효성을 검사하는 예시입니다. 이제 코드를 분석하겠습니다.

1. (ngSubmit)="submitForm()": 폼이 제출될 때 호출될 submitForm() 메서드를 정의합니다. 이 메서드는 폼 데이터를 처리하는 로직을 포함해야 합니다.

2. #myForm="ngForm": 폼 요소에 ngForm 디렉티브를 적용하여 폼의 상태와 유효성 검사에 필요한 기능을 사용할 수 있게 합니다. myForm은 템플릿 참조 변수로 폼 요소를 참조할 때 사용됩니다.

3. <input> 요소: 폼 필드를 정의합니다. name 속성은 폼 필드의 식별자로 사용되며, [(ngModel)] 디렉티브를 통해 폼 데이터와 양방향 데이터 바인딩을 수행합니다. required 속성은 필드가 비어있을 경우 유효성 검사를 통과하지 못하도록 설정합니다. email 속성은 이메일 유효성 검사를 수행합니다.

4. <button> 요소: 폼 제출 버튼을 정의합니다. [disabled] 속성은 폼이 유효하지 않을 경우 버튼을 비활성화합니다.

위의 코드를 사용하면 Angular에서 <form> 태그를 활용하여 폼을 만들고, 필드 유효성 검사를 수행할 수 있습니다. 이를 통해 사용자로부터 데이터를 수집하고 유효성을 검사할 수 있습니다.
아래는 Angular에서 템플릿 외 컴포넌트에서 FormGroup를 활용하는 예시 코드입니다. 코드를 분석하고 설명하겠습니다.

// form.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
})
export class FormComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  submitForm() {
    if (this.myForm.valid) {
      // 폼 데이터 처리 로직
      console.log(this.myForm.value);
    } else {
      // 유효성 검사 실패 처리
      console.log('폼이 유효하지 않습니다.');
    }
  }
}

위의 코드는 템플릿 외 컴포넌트에서 FormGroup를 사용하여 폼을 만들고 유효성을 검사하는 예시입니다. 이제 코드를 분석하겠습니다.

1. FormGroup, FormBuilder, Validators 등을 임포트합니다.

2. myForm: FormGroup;: myForm이라는 프로퍼티로 FormGroup 객체를 선언합니다.

3. constructor(private formBuilder: FormBuilder): FormBuilder를 주입받는 생성자를 정의합니다.

4. this.myForm = this.formBuilder.group({ ... });: FormBuilder를 사용하여 myForm을 초기화합니다. group() 메서드를 사용하여 폼 그룹을 생성하고, 폼 필드와 해당 필드의 유효성 검사 규칙을 정의합니다. 위의 예시에서는 name과 email 필드를 정의하고, Validators.required와 Validators.email을 사용하여 유효성 검사를 수행합니다.

5. submitForm(): 폼 제출 시 호출되는 메서드입니다. myForm.valid를 통해 폼의 유효성을 검사하고, 유효할 경우 폼 데이터를 처리하는 로직을 실행합니다.

위의 코드를 사용하면 Angular 컴포넌트에서 FormGroup를 활용하여 폼을 만들고 유효성을 검사할 수 있습니다. FormBuilder를 사용하면 템플릿 외에서도 폼을 구성하고 유효성 검사 규칙을 적용할 수 있습니다.