반응 형 양식을 사용하여 부모 구성 요소에 데이터를 어떻게 보내나요? 내 자식 구성 요소에는 다음이 포함되어 있지만 여기 예제에서는 작동하지 않는 것 같습니다.
이 문제를 어떻게 해결할 수 있습니까? 양식에 무언가를 입력 할 때 콘솔 출력에서 아무것도받지 못합니다. 누군가 Stackblitz 데모를 제공 할 수 있습니까?
아이:
public editAddressForm: FormGroup;
@Output() private onFormGroupChange = new EventEmitter<any>();
this.editAddressForm = this.formBuilder.group({
'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
'streetName': [null, [Validators.required, Validators.maxLength(64)]],
'city': [null, [Validators.required, Validators.maxLength(32)]],
'state': [null, [Validators.required, Validators.maxLength(16)]],
'postalCode': [null, [Validators.required, Validators.maxLength(16)]]
})
}
ngOnInit() {
this.onFormGroupChange.emit(this.editAddressForm);
<form [formGroup]="editAddressForm">
<input formControlName = "city" class = "mailstopcode"></input>
<input formControlName = "PostalCode" class = "incareof"></input>
</form>
부모의:
formCheck :any = ''
public onFormGroupChangeEvent(_event) {
this.formCheck = _event;
console.log(_event, this.formCheck['controls'])
console.log(_event)
}
<app-mailing-form (onFormGroupChange)="onFormGroupChangeEvent($event)"></app-mailing-form>
양식이 변경 될 때마다 이벤트 이미 터를 전달해야합니다. 즉, 양식의 변경 사항을 구독 한 다음 @Output()자녀의 ngOnInit메서드 에서 속성을 내 보내야합니다 .
ngOnInit() {
this.editAddressForm.valueChanges
.subscribe(() => this.onFormGroupChange.emit(this.editAddressForm.value));
}
위의 코드는 양식이 유효하지 않은 경우에도 이벤트를 발생 시킨다는 점을 고려하십시오. 양식이 유효 할 때만 이벤트를 발생시키려는 경우, 즉 제출 버튼을 누른 후 다음과 같이 할 수 있습니다.
public submit(): void {
if (this.editAddressForm.valid) {
this.onFormGroupChange.emit(this.editAddressForm.value);
}
}
또는 rxjs 관찰 가능한 패턴 사용 :
private submit$ = new Subject<void>();
ngOnInit() {
this.submit$.pipe(
filter(() => this.editAddressForm.valid),
map(() => this.editAddressForm.value),
).subscribe((formData) => this.onFormGroupChange.emit(formData));
}
public submit(): void {
this.submit$.next();
}
최신 정보:
부모 구성 요소는 onFormGroupChange첫 번째 인수로 양식 데이터를 수신하는 함수를 제공하는 자식 구성 요소 의 이벤트를 수신하면됩니다.
public onFormGroupChangeEvent(formData) {
console.log(formData.city);
console.log(formData.postalCode);
console.log(formData);
}
<app-mailing-form
(onFormGroupChange)="onFormGroupChangeEvent($event)">
</app-mailing-form>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다