Menu
How can I get the value of this.resFormGroup.patientName.lastname.value without using [ngModel]?
What are the purpose of name="resForm", [formGroup]="resFormGroup" and #resNgForm="ngForm" in the HTML <form> tag?
Do I need the template reference variable #resNgForm since I have the [formGroup]="resFormGroup"?
This is my component:
// FormBuilder
this.resFormGroup = this.formBuilder.group({
patientName: this.formBuilder.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required]
}),
address: this.formBuilder.group({
street: [],
zip: [],
city: []
})
});
This is my template:
<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>
My submit button:
onSubmit() {
console.log("Submit button pressed [ngModel: " + this.myFirstName + "] [Form: " + this.resFormGroup.controls["patientName"].dirty + "]");
}
With [ngModel], I can get the first name; I can also access the dirty attribute of the formGroup's patientName.
816
FormControlName: It is used with FormGroup with a <form> tag. FormControlName syncs a FormControl in an existing FormGroup to a form control by name. Now let us start how to use FormControl in our angular application. For every form control such as text, checkbox, radio button we need to create an instance of FormControl in our class.
Angular’s FormBuilder helps you streamline the process of building advanced forms while avoiding repetition. Put simply, FormBuilder provides syntactic sugar that eases the burden of creating instances of FormControl, FormGroup, or FormArray and reduces the amount of boilerplate required to build complex forms.
When the form will be submitted, we can access form values as following. To validate a particular form control, we need to get value of that form control. For example, to validate name FormControl, we need to create a method in our class as given below. Now use it in HTML. We can also access FormControl value using FormGroupDirective.
There are a couple of very simple ways to access the FormControl in a nested FormGroup. From the AbstractControl usage notes: For example, to get a name control nested within a person sub-group:
Based on this tutorial about dynamic form, they used a very simple way to show the values of the whole form without [ngModel].
How to get the formBuilder form values? The answer is 'this.myForm.value'.
For example:
onSubmit(model: ResCrud) {
console.log("Nested Control: " + JSON.stringify(this.resFormGroup.value));
}
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With