Angular 2에서 양식 재설정

1. Angular 2의 resetForm() 메서드
2. Angular 2의 resetForm() 메서드를 사용하여 양식을 재설정하는 단계

이 튜토리얼에서는 Angular 2에서 양식을 재설정하는 방법을 보여줍니다.

ngForm 지시문은 양식을 생성 및 초기화하고 해당 필드에 대한 유효성 검사를 설정하는 방법을 제공합니다. ngForm의 일반적인 용도 중 하나는 페이지의 모든 양식 컨트롤 값을 초기 상태로 재설정하는 것입니다.

ngForm 지시문에 대한 HTML 코드의 참조를 추가한 다음 재설정 메소드에 액세스해야 합니다.

Angular 2의 resetForm() 메서드

resetForm() 메서드는 양식 값을 지우고 초기 상태로 재설정하는 내장 Angular 2 메서드입니다.

resetForm() 메소드는 부울을 인수로 전달하여 호출할 수 있습니다. 부울 인수가 유효하면 양식의 필드와 값이 지워집니다.

false인 경우 속성이 false로 설정된 필드만 제거됩니다.

Angular 2의 resetForm() 메서드를 사용하여 양식을 재설정하는 단계

다음은 resestForm() 메서드를 사용하여 Angular 2에서 양식을 재설정하는 단계입니다.

양식 유형을 가져오기 위한 구문:

import { ResestFormModule } from '@angular/forms';

양식 유형을 인스턴스화하기 위한 구문:

let myForm = new ResestForm();

이 구성 요소와 하위 구성 요소에서 사용할 구성 요소에 양식을 등록하십시오. 이렇게 하면 모든 자식 구성 요소가 이 양식에 대해 알고 사용할 수 있습니다.

사용자가 버튼을 클릭하거나 양식에 데이터를 제출할 때와 같이 양식을 재설정하려는 경우 코드에서 이 메소드를 호출하십시오.

예(TypeScript):

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent  {
    myForm: FormGroup;
    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            name: '2'
        })
    }
    resetForm() {
        this.myForm.reset();
    }
}

예(HTML):

<form [formGroup]="myForm" novalidate>
<select formControlName="name">
    <option disabled hidden value="null">Please select</option>
    <option value="1">Pakistan</option>
    <option value="2">USA</option>
    <option value="3">Uk</option>
</select>
</form>
<button (click)="resetForm()">reset</button>

여기를 클릭 위 코드의 라이브 데모를 확인하십시오.