我有一個子組件，它有一個反應式表單，當我點擊提交時，我希望它觸發提交功能，其中包括提交驗證。
父組件
export class ParentComponent {
@ViewChild('childComponent') childComponent: ChildComponent
submit(): void {
this.childForm.triggerSubmit();
}
}
父 HTML
<child-component #childComponent></child-component>
<input type="button" value="submit" (click)="submit()">
子組件
export class ChildComponent {
@ViewChild('myForm') myForm: NgForm;
myFormGroup: FormGroup;
constructor(private fb: FormBuilder) {
this.initializeForm();
}
initializeForm(): void {
this.myFormGroup = this.fb.group(
{
name: ['', { validator: Validators.required}]
}, { updateOn: 'submit' }
);
}
submitForm() {
console.log(this.myFormGroup.value);
}
triggerSubmit() {
this.myForm.ngSubmit.emit();
}
}
子組件 HTML
<form
#myForm="ngForm"
[formGroup]="myFormGroup"
(submit)="submitForm()"
>
<label for="float-input-name">Device Name</label> <br />
<input
formControlName="name"
id="float-input-name"
type="text"
/>
<ng-container
*ngIf="
myFormGroup.get('name')?.invalid &&
myFormGroup.get('name')?.errors &&
(myFormGroup.get('name')?.dirty || myFormGroup.get('name')?.touched)
"
>
<small
class="text-danger block"
*ngIf="myFormGroup.get('name')?.hasError('required')"
>
This field is required.
</small>
</ng-container>
</form>
triggerSubmit 方法被呼叫，但表單的提交事件沒有被觸發。一旦它被觸發，理想情況下應該觸發 submitForm 方法。任何幫助將不勝感激。謝謝！
uj5u.com熱心網友回復：
在子組件html 中，您應該將事件名稱更改(submit)為(ngSubmit)
<form #myForm="ngForm" [formGroup]="myFormGroup" (ngSubmit)="submitForm()" >
....
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507644.html
標籤：javascript 有角度的 角反应形式
上一篇：單擊框并更改框顏色