SharePoint 2013 List NewForm,DisForm,EditForm.aspx to be replaced with CustomForm.aspx(Angular Form)

Question

I have created Angular-6 Form & deployed to the SharePoint 2013 page (CustomForm.aspx). Provided navigation to the new page. Once form is filled & submit button is clicked, an item is created in the list. Till here I'm successful

Now, while editing the item in the list , I need to navigate to the CustomForm.aspx & populate all the details of that item in the form.

Basically, I need to use Custom Form for all the New,Dis,Edit items. How can this be achieved ?

Very Beginner in SharePoint & trying to explore the custom development

Answer 1

This is a very type of question. I will give you the basic idea to achieve this type of requirement. Follow below steps:

1. While opening Display/Edit form, you can pass the item ID as a query string parameter with the SharePoint page URL.
2. You can read this query string parameter in your Controller and fetch the SharePoint list item using REST API.
3. Then you can bind the data on your view using Angular directives(which you must be knowing already).
4. Similarly you can also send the form mode either New, Display or Edit as query string parameter with URL.
5. Based on form mode you can render your angular form.
6. If form mode is New, Then set blank values to your scope variables and show the normal blank form.
7. If form mode is Display, then fetch the data using item ID, bind to form. And you can disable the fields using ng-disabled.
8. If form mode is Edit, then fetch the data, bind to form fields.
9. While submitting your data, you can call Add Item or Update Item functions based on your form mode.