Sending updated form entries using ngForm

Question

Sending updated form entries using ngForm

I have been struggling to submit a form with default values already set in the form field. The HTML code I am using is as follows:

<form #updateEndpointForm="ngForm" (ngSubmit)="updateEndpoint(updateEndpointForm);">
            <section class="form-block">
                <div class="form-group">
                    <input type="text" placeholder="id" name="id" [value]="updateEndpointData?.id" [hidden]="true" ngModel required>
                </div>
                <div class="form-group">
                    <label for="endPointType">Endpoint Type</label>
                    <input type="text" placeholder="Endpoint Type" name="endPointType" [value]="updateEndpointData?.endPointType" ngModel required readonly>
                </div>
                <div class="form-group">
                    <label for="name">Endpoint Name</label>
                    <input type="text" placeholder="Endpoint Name" name="name" [value]="updateEndpointData?.name" ngModel required>
                </div>
            </section>
            <button type="submit" class="btn btn-primary">ADD</button>
        </form>

Although the data in the corresponding field displays on the HTML page, when I submit the form, the

console.log(updateEndpointForm.value);

output shows it as empty

{"id":"","name":"","endPointType":""}

. Only the modified field's value is displayed. My goal is to gather all values from updateEndpointForm, not just the ones that are modified. How can I achieve this without using two-way binding [(ngModel)]? Edit: I prefer not to utilize two-way binding.

angular typescript

Answer 1

Answer №1

Presented below is the effective solution utilizing Two-way data binding:

HTML File,

<form #updateEndpointForm="ngForm" (ngSubmit)="updateEndpoint(updateEndpointForm);">
  <section class="form-block">
      <div class="form-group">
          <label for="endPointType">Id</label>
          <input type="text" placeholder="id" name="id"  [hidden]="true" [(ngModel)]="updateEndpointData.id" required>
      </div>
      <div class="form-group">
          <label for="endPointType">Endpoint Type</label>
          <input type="text" placeholder="Endpoint Type" name="endPointType" [(ngModel)]="updateEndpointData.endPointType" required readonly>
      </div>
      <div class="form-group">
          <label for="name">Endpoint Name</label>
          <input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="updateEndpointData.name" required>
      </div>
  </section>
  <button type="submit" class="btn btn-primary">ADD</button>
</form>

Typescript File,

//A sample variable 'updateEndpointData' has been declared with initial data
public updateEndpointData:any={"id":1,"name":"Muthu","endPointType":"test"};

updateEndpoint(data){
    console.log("form data",data.value);
}

Output Snapshot, Please note that the initial value of "Muthu" was dynamically changed to "Muthukumar" during execution.

https://i.sstatic.net/8DqET.png

For a live working example, refer to StackBlitz here.

Answer 2

Presented below is the effective solution utilizing Two-way data binding:

HTML File,

<form #updateEndpointForm="ngForm" (ngSubmit)="updateEndpoint(updateEndpointForm);">
  <section class="form-block">
      <div class="form-group">
          <label for="endPointType">Id</label>
          <input type="text" placeholder="id" name="id"  [hidden]="true" [(ngModel)]="updateEndpointData.id" required>
      </div>
      <div class="form-group">
          <label for="endPointType">Endpoint Type</label>
          <input type="text" placeholder="Endpoint Type" name="endPointType" [(ngModel)]="updateEndpointData.endPointType" required readonly>
      </div>
      <div class="form-group">
          <label for="name">Endpoint Name</label>
          <input type="text" placeholder="Endpoint Name" name="name" [(ngModel)]="updateEndpointData.name" required>
      </div>
  </section>
  <button type="submit" class="btn btn-primary">ADD</button>
</form>

Typescript File,

//A sample variable 'updateEndpointData' has been declared with initial data
public updateEndpointData:any={"id":1,"name":"Muthu","endPointType":"test"};

updateEndpoint(data){
    console.log("form data",data.value);
}

Output Snapshot, Please note that the initial value of "Muthu" was dynamically changed to "Muthukumar" during execution.

https://i.sstatic.net/8DqET.png

For a live working example, refer to StackBlitz here.

Sending updated form entries using ngForm

Answer №1

Similar questions

Create a variable that is assigned the value of a route parameter, but leave it undefined if the parameter cannot be

Angular - Enhancing the page with valuable information

``If you're looking to integrate a 360-degree product viewer into your Angular application, here is a

angular determine if a column exists within a matCellDef iteration

You must provide a secret or key in order to use the JwtStrategy

Does angular-sortablejs work with angular 5?

What is the best way to include text or a label on my Angular map without using a marker?

Creating a custom dropdown filter in ag-grid-angular

Using Typescript for AngularJS bindings with ng.IComponentController

Utilizing Angular's asynchronous validators to handle incoming response data

Losing the generic type in nested interfaces

Experimenting with HttpClient request using callFake() method

What steps should be taken to guarantee that the view is created only after receiving values from the route params subscription?

Arranging elements within ngFor loop in Angular 2: positioning and aligning items

Angular 4: How to Format Date Input Types

Issue found in ng-bootstrap.js ng-bootstrap for Angular 6

`transpilePackages` in Next.js causing Webpack issue when used with Styled Components

What causes the left click to not trigger in Kendo's Angular Charts?

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

Developing applications using the combination of Vue.js, JSX, and