I'm having issues passing my form group data to the saveDialog() function which updates the form data on a submit button.
How would I do this in Angular 7? I'm trying to have all my components for each form group seperated, and submitted/updated together using one button?
modify-view-action.component.html
<form [formGroup]="modifyActionForm" (ngSubmit)="saveDialog()">
<div class="container" fxLayout="row" fxLayoutGap="25px">
<div class="column1" fxLayout="column">
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Keyword</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Description</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Icon</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
<mat-form-field>
<mat-label>Priority</mat-label>
<input matInput>
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
</div>
</form>
modify-view-action.component.ts
export class ModifyViewActionComponent implements OnInit {
modifyActionForm: FormGroup;
dbrAction: any;
constructor() { }
ngOnInit() {
this.initData();
}
initData() {
this.dbrAction = JSON.parse(localStorage.getItem('DbrAction'));
}
}
First in order to get data from a FormGroup you need to add formControlName on each input you want data from. Like that:
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput formControlName="name">
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>
You also need to declare in your.ts file, the FormGroup with each controllers. Like that:
modifyActionForm = new FormGroup({
name : new FormControl(),
keyword: new FormControl(),
description: new FormControl(),
// And that ⬆ for each input in your form
})
In order to get the data from this FormGroup you need to do this:
this.modifyActionForm.value
You will get an Object with your inputs' data.
Your question is not quite clear but if you want to pass data like for example your FormGroup from a component to another one, many techniques exist.
I recommend you to read this great article from Jeff Delaney explaining the different way to sharing Data between Angular Components ( Fireship.io - Sharing Data between Angular Components ) and this one Fireship.io - Angular Reactive Forms Basics Guide explaining how works reactive forms and how to use them.
Good day !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.