각진 형태

버전 1(AngularJs)에서 Angular를 배우기 시작했다면 양식에서 상태 및 유효성 검사를 처리하기 위해 깨끗한 Html을 구성하는 데 더 익숙해질 것입니다. 이 접근 방식을 템플릿 기반 양식이라고 합니다.

대조적으로 Model-Dirven Forms 또는 Reactive Forms의 Angular 카운트는 HTML이 아닌 TypeScript에 있는 FormControl이라는 객체를 통해 양식에서 유효성 검사를 적용하고 상태(유효, 무효, 터치 및 더티)를 유지하는 대부분의 책임을 위임합니다. 템플릿 기반 양식과 같습니다.

템플릿 기반 양식

| 장점 | 단점 |
| -매우 쓰기 쉬움 | 더 많은 HTML 코드 라인이 필요하고 유지하기가 어려워질 수 있습니다. |
| -읽고 이해하기 쉬운 | 테스트할 수 없으며 유효성 검사기에 단위 테스트를 적용할 방법이 없습니다. |

반응형

이 강력한 모듈은 FormControlName을 통해 양식의 각 입력에 연결될 상태 및 유효성 검사 규칙을 처리하기 위해 TypeScript 클래스에서 양식을 FormGroup으로 정의하는 방법을 제공합니다.

개인적으로 나는 둘 다 Angular에서 양식을 만드는 좋은 방법이라고 생각하지만 하나 또는 다른 접근 방식에 대한 결정은 필요에 따라 양식의 복잡성이 낮습니다. 복잡성이 낮은 작은 양식을 만들어야 하는 경우 템플릿 기반을 사용할 수 있습니다. 양식이지만 단위 테스트로 복잡한 양식을 작성해야 하는 경우 반응형 양식이 현명한 결정이 될 것입니다.

첫 번째 Reactive Form을 만들어 봅시다.

콘솔을 열고 다음을 입력하십시오.

ng new reactive-forms

? Would you like to add Angular routing? (y/N) y

cd reactive-forms

cd .\src\app

app.module.ts에서 모듈 ReactiveFormsModule을 가져옵니다.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layout/header/header.component';
import { FooterComponent } from './layout/footer/footer.component';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

components라는 앱 안에 폴더를 만들고 create-fruits라는 구성 요소를 만듭니다.

ng g c create-fruits

CreateFruitsComponent 클래스에서 양식의 구조를 정의합니다.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Record } from 'src/app/model/record';

@Component({
  selector: 'app-create-fruits',
  templateUrl: './create-fruits.component.html',
  styleUrls: ['./create-fruits.component.scss'],
})
export class CreateFruitsComponent implements OnInit {
  title!: string;
  form!: FormGroup;
  fruit!: Record;

  constructor() {}

  ngOnInit(): void {
    this.form = new FormGroup({
      name: new FormControl('', [Validators.required]),
      description: new FormControl('', [Validators.required]),
      image: new FormControl('', [Validators.required]),
      price: new FormControl(0, [Validators.required]),
    });
  }

  onSubmit(): void {
    console.log(this.form);
  }
}

앞에서 언급했듯이 TypeScript에서 폼을 정의하면 폼의 상태와 그 안에 있는 모든 formControl을 처리할 수 있는 좋은 방법이 제공됩니다.

create-fruits.component.html

<section class="section">
  <div class="container">
    <h1>New Fruit</h1>
    <div class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label class="label">Name :</label>
        <input
          type="text"
          id="name"
          formControlName="name"
          placeholder="Name"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['name'].dirty || form.controls['name'].touched) &&
            form.controls['name'].errors &&
            form.controls['name'].errors['required']
          "
        >
          Name is required!
        </p>
      </div>

      <div class="form-group">
        <label class="label">Description :</label>
        <input
          type="text"
          id="description"
          formControlName="description"
          placeholder="Name"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['description'].dirty ||
              form.controls['name'].touched) &&
            form.controls['description'].errors &&
            form.controls['description'].errors['required']
          "
        >
          Description is required!
        </p>
      </div>
      <div class="form-group">
        <label class="label">Image :</label>
        <input
          type="text"
          id="image"
          formControlName="image"
          placeholder="Image"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['image'].dirty || form.controls['name'].touched) &&
            form.controls['image'].errors &&
            form.controls['image'].errors['required']
          "
        >
          Image is required!
        </p>
      </div>
      <div class="form-group">
        <label class="label">Price :</label>
        <input
          type="number"
          id="price"
          formControlName="price"
          placeholder="Price"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['price'].dirty || form.controls['name'].touched) &&
            form.controls['price'].errors &&
            form.controls['price'].errors['required']
          "
        >
          Image is required!
        </p>
      </div>
      <div class="field is-grouped">
        <div class="control">
          <button
            type="submit"
            class="button is-success"
            (click)="onSubmit()"
            [disabled]="!form.valid"
          >
            Save
          </button>
        </div>
        <div class="control">
          <button class="button is-warning">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</section>

모든 html 요소를 캡슐화하기 위해 클래식 태그 양식을 사용하지 않고 [formGroup]="form"과 함께 div를 사용하고 있기 때문에 필요하지 않습니다. 또한 각 입력을 정의된 올바른 formControl과 연결합니다. 타입스크립트.

이 포스팅이 여러분의 Angular 학습에 도움이 되었으면 합니다.

Live Demo
Download Code