Angular Submit a form programmatically

Spread the love

Need of Angular Submit a form programmatically for different type of design and logic. Like your submit button present out of form block or you have call submit method from ts file. Angular Submit a form programmatically for that mechanism we use here ViewChild template reference with NgForm intance. Follow the bold key points for the main points of this tutorial.

Here we define two way of form submit in this article below

Form submit dynamically or programmatically in angular
Form submit button located outside of a form in html

1. Form Submit dynamically or programmatically in Angular

app.component.html

<div class="contacts-list">
  <table>
    <th>Id</th>
    <th>Name</th>
    <th>Department</th>
    <th>Email</th>
    <th>Edit</th>
    <tr
      *ngFor="let contact of contactsList;trackBy: trackByFn;
let i = index
"
    >
      <td>{{ contact.id }}</td>
      <td>{{ contact.name }}</td>
      <td>{{ contact.department }}</td>
      <td>{{ contact.email }}</td>
      <td class="edit">
        <a href="javascript:void(0)" (click)="editForm(i)">
          Edit
        </a>
      </td>
    </tr>
  </table>
</div>
<ng-template [ngIf]="isAddFormOpen">
<form
    [formGroup]="contactsForm"
    #addform="ngForm"
    (ngSubmit)="submitContactsForm()"
  >
    <label for="name" class="form-group-label">Name</label>
    <input
      formControlName="name"
      type="text"
      name="name"
      id="name"
      class="form-input"
      placeholder="Enter Name"
    />
    <br />
    <label for="department" class="form-group-label">Department</label>
    <input
      formControlName="department"
      type="text"
      name="department"
      id="department"
      class="form-input"
      placeholder="Enter Department"
    />
    <br />
    <label for="eMail" class="form-group-label">Email</label>
    <input
      formControlName="email"
      type="email"
      name="email"
      id="email"
      class="form-input"
      placeholder="Enter email"
    />
  </form>
</ng-template>
<div class="form-button-with-icon" *ngIf="!isEdit">
  <a href="javascript:void(0)">
    <span>
      <i class="icon-plus"></i>
    </span>
    <p (click)="submitForm()">Add Contact</p>
  </a>
</div>
<div class="form-button-with-icon" *ngIf="isEdit">
  <a href="javascript:void(0)">
    <span>
      <i class="icon-plus"></i>
    </span>
    <p (click)="submitForm()">Update Contact</p>
  </a>
</div>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  NgForm
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('addform') addform: NgForm;
  contactsForm: FormGroup;
  public isAddFormOpen = false;
  public isEdit = false;
  public contactsList = [];
  constructor(private _fb: FormBuilder) {
    this.contactsForm = this._fb.group({
      id: [Number],
      name: [
        '',
        [
          Validators.required,
          Validators.pattern('^[a-zA-Z-,]+(s{0,1}[a-zA-Z-, ])*$')
        ]
      ],
      department: ['', [Validators.required]],
      email: [
        '',
        [
          Validators.required
          //Validators.pattern('[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\\.[a-z]{2,3}')
        ]
      ]
    });
  }

  get formControls() {
    return this.contactsForm.controls;
  }

  trackByFn(index, entity) {
    return entity.email;
  }

  submitForm() {
    if (this.isAddFormOpen) {
      this.addform.onSubmit(undefined);
    } else {
      this.isAddFormOpen = true;
    }
  }

  editForm(i) {
    this.isEdit = true;
    this.contactsForm.patchValue(this.contactsList[i]);
    this.isAddFormOpen = true;
  }

  submitContactsForm() {
    if (this.contactsForm.invalid) {
      return;
    } else if (this.isEdit) {
      let index = this.contactsList.findIndex(
        x => x.id == this.contactsForm.value.id
      );
      this.contactsList[index] = { ...this.contactsForm.value };

      console.log(this.contactsList);
      this.isEdit = false;
      this.isAddFormOpen = false;
      this.addform.reset();
    } else {
      this.contactsForm.get('id').setValue(this.contactsList.length + 1);
      this.contactsList.push(this.contactsForm.value);
      this.isAddFormOpen = false;
      this.addform.reset();
    }
  }
}