Angular의 반응형 양식: 변경 사항 수신

FormGroup 및 FormControl과 같은 반응형 양식 인스턴스에는 최신 값을 내보내는 관찰 가능 항목을 반환하는 valueChanges 메서드가 있습니다. 따라서 valueChanges를 구독하여 인스턴스 변수를 업데이트하거나 작업을 수행할 수 있습니다.

이것이 처음이라면 Reactive Forms에 대한 소개를 살펴보십시오.

여기에서는 양식에서 값이 변경될 때마다 템플릿 문자열을 업데이트하는 매우 간단한 예제를 만들 것입니다.

먼저 FormBuilder를 사용하여 반응형 양식을 초기화하겠습니다.

myForm: FormGroup;
formattedMessage: string;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: '',
    email: '',
    message: ''
  });

  this.onChanges();
}

양식을 초기화한 후 ngOnInit 수명 주기 후크에서 onChanges 메서드를 호출하는 방법에 주목하십시오. 다음은 onChanges 메서드의 내용입니다.

onChanges(): void {
  this.myForm.valueChanges.subscribe(val => {
    this.formattedMessage =
    `Hello,

    My name is ${val.name} and my email is ${val.email}.

    I would like to tell you that ${val.message}.`;
  });
}

전체 양식 그룹 대신 특정 양식 컨트롤의 변경 사항을 수신할 수도 있습니다.

onChanges(): void {
  this.myForm.get('name').valueChanges.subscribe(val => {
    this.formattedMessage = `My name is ${val}.`;
  });
}

? valueChanges가 observable을 반환하기 때문에 방출된 값으로 할 수 있는 작업의 측면에서 하늘이 거의 한계입니다.