I am beginner to angular. Problem is actually in EmployeeComponent.ts , if i call this.resetForm();
in ngOnInit()
then the controls of dialog gets displayed during page load... but during edit when it comes from employeelist the service.formData
sets back to null all time i don't want this to happen. I want both functionalities to happen.
This below error if i remove this.resetForm();
in ngOnInit()
. (but edit works fine) Note : service.formData
contains fields id, description and active
Consolelog error : EmployeeComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'id' of undefined at EmployeeComponent.push.
EmployeeComponent.ts
ngOnInit() {
this.resetForm();
}
resetForm(form ? : NgForm) {
if (form != null)
form.resetForm();
this.service.formData = {
id: null,
description: '',
active: true,
}
console.log(this.service.formData.id);
}
EmployeeListComponent.ts
onEdit(emp: Employee) {
this.service.formData = Object.assign({}, emp);
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = "50%";
this.dialog.open(EmployeeComponent, dialogConfig);
}
Employee.component.html
<form #form="ngForm" autocomplete="off" >
<mat-grid-list cols="2">
<input type="hidden" name="id" #id="ngModel" [(ngModel)]="service.formData.id">
<mat-form-field>
<input name="description" matInput #description="ngModel" [(ngModel)]="service.formData.description" placeholder="Employee" required>
</mat-form-field>
<mat-checkbox matInput #active="ngModel" [(ngModel)]="service.formData.active" name="active">Active</mat-checkbox>
</mat-grid-list>
<button mat-raised-button color="primary" type="submit" [disabled]="form.invalid" (click)="onSubmit(form)">Submit</button>
<button mat-raised-button color="warn" style="margin-left: 6px;" (click)="onClear(form)">Clear</button>
</form>
Here EmployeeComponent is your mat dialog component to open so you need to provide data to the dialog using below in your constructor of EmployeeComponent
constructor(
@Inject(MAT_DIALOG_DATA) data)){}
and when you open the dialog for editing purpose, you need to set data
onEdit(emp: Employee) {
dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = "50%";
// Provide your data here
dialogConfig.data = emp;
this.dialog.open(EmployeeComponent, dialogConfig);
}
Now you can use this data on EmployeeComponent by name "data" property
and only use reset form in ngOninit
ngOnInit() {
if (form != null)
form.resetForm();
}
Other things you need to handle like clear this data when you have done with save
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.