Angular2:如何访问嵌套 formBuilder 表单上的 formControl 值
Angular2: how to access a formControl value on a nested formBuilder form
如何在不使用 [ngModel]
的情况下获取 this.resFormGroup.patientName.lastname.value
的值?
name="resForm"
、[formGroup]="resFormGroup"
和 #resNgForm="ngForm"
在 HTML <form>
标签中的用途是什么?
我需要模板引用变量 #resNgForm
因为我有 [formGroup]="resFormGroup"
?
这是我的组件:
// FormBuilder
this.resFormGroup = this.formBuilder.group({
patientName: this.formBuilder.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required]
}),
address: this.formBuilder.group({
street: [],
zip: [],
city: []
})
});
这是我的模板:
<form name="resForm" [formGroup]="resFormGroup" (ngSubmit)="onSubmit()" #resNgForm="ngForm">
<fieldset formGroupName="patientName">
<legend>Name</legend>
<label>Firstname:</label>
<input type="text" formControlName="firstname" [(ngModel)]="myFirstName">
<label>Lastname:</label>
<input type="text" ***formControlName="lastname"***>
</fieldset>
<fieldset formGroupName="address">
<legend>Address</legend>
<label>Street:</label>
<input type="text" formControlName="street">
<label>Zip:</label>
<input type="text" formControlName="zip">
<label>City:</label>
<input type="text" formControlName="city">
</fieldset>
<button type="submit" class="btn btn-primary" [disabled]="!resNgForm.valid">Submit</button>
我的提交按钮:
onSubmit() {
console.log("Submit button pressed [ngModel: " + this.myFirstName + "] [Form: " + this.resFormGroup.controls["patientName"].dirty + "]");
}
有了[ngModel]
,我就能得到名字;我还可以访问 formGroup
的 patientName
的 dirty
属性。
基于这个关于 dynamic form 的教程,他们使用了一种非常简单的方法来显示整个表单的值,而不需要 [ngModel]。
如何获取formBuilder表单值?答案是'this.myForm.value'.
示例代码
例如:
onSubmit(model: ResCrud) {
console.log("Nested Control: " + JSON.stringify(this.resFormGroup.value));
}
Web 控制台中的外观
如何在不使用 [ngModel]
的情况下获取 this.resFormGroup.patientName.lastname.value
的值?
name="resForm"
、[formGroup]="resFormGroup"
和 #resNgForm="ngForm"
在 HTML <form>
标签中的用途是什么?
我需要模板引用变量 #resNgForm
因为我有 [formGroup]="resFormGroup"
?
这是我的组件:
// FormBuilder
this.resFormGroup = this.formBuilder.group({
patientName: this.formBuilder.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required]
}),
address: this.formBuilder.group({
street: [],
zip: [],
city: []
})
});
这是我的模板:
<form name="resForm" [formGroup]="resFormGroup" (ngSubmit)="onSubmit()" #resNgForm="ngForm">
<fieldset formGroupName="patientName">
<legend>Name</legend>
<label>Firstname:</label>
<input type="text" formControlName="firstname" [(ngModel)]="myFirstName">
<label>Lastname:</label>
<input type="text" ***formControlName="lastname"***>
</fieldset>
<fieldset formGroupName="address">
<legend>Address</legend>
<label>Street:</label>
<input type="text" formControlName="street">
<label>Zip:</label>
<input type="text" formControlName="zip">
<label>City:</label>
<input type="text" formControlName="city">
</fieldset>
<button type="submit" class="btn btn-primary" [disabled]="!resNgForm.valid">Submit</button>
我的提交按钮:
onSubmit() {
console.log("Submit button pressed [ngModel: " + this.myFirstName + "] [Form: " + this.resFormGroup.controls["patientName"].dirty + "]");
}
有了[ngModel]
,我就能得到名字;我还可以访问 formGroup
的 patientName
的 dirty
属性。
基于这个关于 dynamic form 的教程,他们使用了一种非常简单的方法来显示整个表单的值,而不需要 [ngModel]。
如何获取formBuilder表单值?答案是'this.myForm.value'.
示例代码
例如:
onSubmit(model: ResCrud) {
console.log("Nested Control: " + JSON.stringify(this.resFormGroup.value));
}