Sometimes we must reset the form, before we can redirect the user to another route. Let me explain this with an example.
1. We have a form to create a new employee
2. After we fill the form and when we click the "Save" button, the employee data must be saved and the user should be redirected to the "LIST" route.
3. But canDeactivate guard is added on the "CREATE" route
4. This means if the form is dirty, the canDecativate guard will prevent us from leaving the "CREATE" route
5. So there is a need to to RESET the form, which will reset all the form control values to their intial state and also resets the form flags like dirty, pristine, valid, touched etc.
6. Once the form is REST, the form is no longer dirty, so the canDeactivate guard will not prevent use from leaving the CREATE route
Angular form reset
1. Clears all the form controls
2. Optionally the form controls can be initialised with default values
3. Resets the form state and individual controls state like dirty, pristine, valid, touched etc.
To RESET the form in HTML
[form #employeeForm="ngForm" (ngSubmit)="saveEmployee(employeeForm); employeeForm.reset()"]
There are 2 ways to RESET the form in code. One way is to pass the form (NgForm) to the Submit() method and then call reset() method.
saveEmployee(empForm: NgForm): void {
this._employeeService.save(this.employee);
empForm.reset();
this._router.navigate(['list']);
}
The other way is to use the @ViewChild decorator to access form in code and then call reset() method.
@ViewChild('employeeForm') public createEmployeeForm: NgForm;
saveEmployee(): void {
this._employeeService.save(this.employee);
this.createEmployeeForm.reset();
this._router.navigate(['list']);
}
Please note : @ViewChild() decorator provides access to the NgForm directive in the component class. employeeForm which is passed as the selector to the @ViewChild() decorator is the form template reference variable.
To reset and initialise the form controls with some default values, pass an object to the reset() method with key/value pairs. The key is the form control name and the value is the default value.
this.createEmployeeForm.reset({
name: 'Test Value',
email: 'kudvenkat@pragimtech.com'
});
Text version of the video
http://csharp-video-tutorials.blogspo...
Slides
http://csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
https://www.youtube.com/playlist?list...
Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatAr...
asp.net core docker Angular form reset | |
91 Likes | 91 Dislikes |
17,929 views views | 524K followers |
Science & Technology | Upload TimePublished on 30 Apr 2018 |
Related keywords
tutorialspoint,tutorials dojo,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,mvc design pattern,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,services google play apk,asp.net core 3 release date,server job description,tutorials by a,servicenow,mvc hours,tutorialspoint python,services briefcase,asp.net core web api,craigslist ny,server pro,server status ffxiv,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,mvcc connect,services technologies gps,college football,server jobs,cvs,cnn,mvc tutorial,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,mvc nj,tutorialspoint spark,asp.net core download,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,asp.net core logging,tutorialsystems,mvconnect,cunyfirst,services fms publish announcement,services.msc no abre,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,mvcsd,mvcsc,services.msc,asp.net core configuration,mvc medical,asp.net core tutorial,mvc architecture,mvc2,asp.net core mvc,server hosting,chase online,costco,server jobs near me,capital one,server rack,tutorialspoint html,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,mvc framework,mvc near me,mvc pattern,mvcu,tutorialspoint spring boot,asp.net core middleware,mvc map,services tag dell,mvc webadvisor,mvcc,mvci,mvctc,
Không có nhận xét nào:
Đăng nhận xét