Angular의 반응형 양식

Angular를 사용 중이고 애플리케이션에 양식이 필요한 경우 반응형 양식을 사용하세요. 매우 강력합니다.

Angular에서 양식을 사용하는 모델 중심 방식입니다.

반응형 양식에 사용하는 인스턴스는 생성/업데이트 구성 요소입니다. 받는 내용에 따라 두 가지를 모두 수행할 수 있는 하나의 구성 요소입니다.

반응형 양식에 대한 앱 준비

먼저 ReactiveFormsModule를 app.module.ts에 등록해야 합니다.

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

@NgModule({
  imports: [
    // Other import
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

그게 다야. 이제 애플리케이션에서 반응형 양식을 사용할 수 있습니다.
welcome.component를 사용하여 양식을 채우겠습니다.

첫 번째 양식 추가

반응형 양식에는 컨트롤이 포함된 FormGroup을 사용하는 개념이 있습니다.
그런 다음 하나의 양식에 여러 FormGroup이 있을 수 있습니다.

기본 양식을 추가하여 시작하겠습니다.

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})

export class WelcomeComponent {
  ourForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl(''),
  });
}

보시다시피 이름과 성이라는 두 개의 필드를 포함하는 새로운 양식 그룹을 만듭니다.
그런 다음 각도 형식에서 제공되는 필수 유효성 검사기도 추가합니다.
기본적으로 필요한 것은 필드에 값이 있는지 확인하는 것입니다.

그런 다음 이것을 welcome.component.html에 추가할 수 있습니다.

<form [formGroup]="ourForm" class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">

  <label class="block mb-2 text-sm font-bold text-gray-700">
    First Name:
    <input type="text" formControlName="firstName" class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
  </label>

  <br />

  <label class="block mb-2 text-sm font-bold text-gray-700">
    Last Name:
    <input type="text" formControlName="lastName" class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
  </label>

    <p>
    Values: {{ ourForm.value | json }}<br />
    Form valid: {{ ourForm.status }}
    </p>

</form>

양식의 스타일을 지정하기 위해 몇 가지 간단한tailwind 클래스를 사용하고 있습니다.

그런 다음 [formGroup]을 양식 요소에 배치합니다.

그리고 두 개의 입력 필드를 렌더링하면 formControlName="firstName" 파일에 정의된 것과 동일해야 하는 ts를 사용하여 양식에 연결됩니다.

그런 다음 맨 아래에서 양식 값과 양식이 유효한지 여부를 렌더링합니다.

이제 이것을 실행하면 두 개의 입력이 표시되고 값을 볼 수 있는 옵션이 있습니다.

제출 버튼 연결

이것은 멋지지만 물론 버튼을 클릭할 때 이 데이터를 캡처하려고 합니다.

양식에 제출 핸들러를 추가하여 시작하겠습니다.

<form [formGroup]="ourForm" (ngSubmit)="onSubmit()" class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">

그러면 onSubmit 함수가 호출됩니다.

이 함수를 우리의 welcome.component.ts에 추가해 봅시다.

onSubmit() {
    console.log(this.ourForm.value);
}

이제 제출할 버튼을 추가해 보겠습니다.

<button type="submit" [disabled]="!ourForm.valid" class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline">Submit</button>

보시다시피 양식이 유효하지 않은 경우 이[disabled] 요소를 추가할 수 있습니다.

이제 이 코드를 실행하면 콘솔에서 양식 값을 보고 데이터를 처리할 수 있습니다!

GitHub에서 이 문서의 전체 코드를 다운로드할 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나