Can a form be submitted using ViewChild in Angular5?

Question

Can a form be submitted using ViewChild in Angular5?

Can a form be submitted using ViewChild in Angular5? If so, how can it be achieved?
I attempted to do this but was unsuccessful

My Attempt:

 <form #form="ngForm" (submit)="submitForm(form)" novalidate>
  <input required type="text" #codeRequest="ngModel" [(ngModel)]="requestModel.codeRequest" id="codeRequest" name="codeRequest"/>
 </form>

 <button (click)="func()"> </button>

Code Snippet :

@ViewChild('form') form: ElementRef;
  constructor(){}

  func(){
    this.formStep2.nativeElement.submit();
  }

  submitForm(form: NgForm) {
    ... 
  }

What might be causing my issue?

angular typescript

Answer 1

Answer №1

When it comes to submitting a form with a button (type=submit) that is located outside the form, you have several options:

Start by defining a model:

export interface Student {
  id: number;
  name: string;
}

In your app.component.ts file:

public model: Student;

@ViewChild('form', { read: NgForm }) form: any;

ngOnInit(): void {
  this.setDefaultValueForModel();
}

saveForm($event: Event) {
  $event.preventDefault();

  if (this.form.valid) {
     console.log(this.form.value);
     alert('valid');
   } else {
     alert('invalid');
   }
}

setDefaultValueForModel() {
  this.model = {
    id: 0,
    name: ''
  };
}

Now, in your app.component.html file:

<form #form="ngForm" novalidate id="ngForm" (submit)="saveForm($event)">
  <div class="form-group">
    <label>Name</label>
    <input type="text" required name="name" [(ngModel)]="model.name" #name="ngModel">
    <p *ngIf="name.invalid && name.touched">
      Name is required.
    </p>
  </div>
</form>

<div>
  <button type="submit" form="ngForm" [disabled]="!form.form.valid">
    Save
  </button>
</div>

VIEW DEMO

Answer 2

When it comes to submitting a form with a button (type=submit) that is located outside the form, you have several options:

Start by defining a model:

export interface Student {
  id: number;
  name: string;
}

In your app.component.ts file:

public model: Student;

@ViewChild('form', { read: NgForm }) form: any;

ngOnInit(): void {
  this.setDefaultValueForModel();
}

saveForm($event: Event) {
  $event.preventDefault();

  if (this.form.valid) {
     console.log(this.form.value);
     alert('valid');
   } else {
     alert('invalid');
   }
}

setDefaultValueForModel() {
  this.model = {
    id: 0,
    name: ''
  };
}

Now, in your app.component.html file:

<form #form="ngForm" novalidate id="ngForm" (submit)="saveForm($event)">
  <div class="form-group">
    <label>Name</label>
    <input type="text" required name="name" [(ngModel)]="model.name" #name="ngModel">
    <p *ngIf="name.invalid && name.touched">
      Name is required.
    </p>
  </div>
</form>

<div>
  <button type="submit" form="ngForm" [disabled]="!form.form.valid">
    Save
  </button>
</div>

VIEW DEMO

Answer 3

Answer №2

When you need to submit a form by clicking a button located outside the form, follow this example:

Here is the HTML structure for your view:

<div >
  <button (click)="onSubmit()">Submit from outside</button>

  <form [formGroup]="fooForm" (ngSubmit)="onNgSubmit()">
    <label>Label One:</label>
    <input formControlName = "fieldOne">

    <label>Label Two:</label>
    <input formControlName = "fieldTwo">

  </form>
</div>

In the controller, remember to call the method tied to the ngSubmit event when the button is clicked.

export class YourComponent  {
  public fooForm: FormGroup;

  ngOnInit(){
    this.fooForm = new FormGroup({
      'fieldOne':new FormControl('value-one'),
      'fieldTwo':new FormControl('value-two')
    });
  }

  public onSubmit(){
    console.log("submitting from outside the form");
    this.onNgSubmit();
  }

  public onNgSubmit(){
    console.log(this.fooForm.value);
  }
}

Visit stackblitz for a live demo

Answer 4

When you need to submit a form by clicking a button located outside the form, follow this example:

Here is the HTML structure for your view:

<div >
  <button (click)="onSubmit()">Submit from outside</button>

  <form [formGroup]="fooForm" (ngSubmit)="onNgSubmit()">
    <label>Label One:</label>
    <input formControlName = "fieldOne">

    <label>Label Two:</label>
    <input formControlName = "fieldTwo">

  </form>
</div>

In the controller, remember to call the method tied to the ngSubmit event when the button is clicked.

export class YourComponent  {
  public fooForm: FormGroup;

  ngOnInit(){
    this.fooForm = new FormGroup({
      'fieldOne':new FormControl('value-one'),
      'fieldTwo':new FormControl('value-two')
    });
  }

  public onSubmit(){
    console.log("submitting from outside the form");
    this.onNgSubmit();
  }

  public onNgSubmit(){
    console.log(this.fooForm.value);
  }
}

Visit stackblitz for a live demo

Answer 5

Answer №3

One simple way to include the button within the form is as follows:

If you prefer a different button placement, you will need to explore other options.

Utilize reactive forms in your code to optimize functionality.

submitForm(){ 
    if(this.myReactiveForm.valid){ 
        const formValues = this.myReactiveForm.value;
        this.http.post(url,formValues).subscribe(response => { ... })
    }
}

Answer 6

One simple way to include the button within the form is as follows:

If you prefer a different button placement, you will need to explore other options.

Utilize reactive forms in your code to optimize functionality.

submitForm(){ 
    if(this.myReactiveForm.valid){ 
        const formValues = this.myReactiveForm.value;
        this.http.post(url,formValues).subscribe(response => { ... })
    }
}

Can a form be submitted using ViewChild in Angular5?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to show the previous month along with the year?

Issue with minifying AngularJS and TypeScript route configuration for safe minification

How is it possible for TypeScript to enable the importing of dependencies that it ultimately cannot utilize during runtime?

What could be the reason behind the frequent appearance of multiple calls in Fiddler upon initiating a SignalR connection

Brand new Angular 9 application encountering the error message "ERROR in Cannot read property 'flags' of undefined" when running "ng build" on a Mac device

Tips for avoiding dual API calls in Angular

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

How to open a PDF file in a new tab using Angular

Unable to retrieve shared schema from a different schema.graphql file within the context of schema stitching

Prevent selection of past dates and times in ng-bootstrap calendar in Angular 7

Angular 2 Typeface Delivery to the Server

Unveiling the Swiper Instance with getSwiper in Ionic5 and Angular

Making an API request at regular intervals of x seconds

Converting the following ngRx selector to a boolean return – a guide

Youngster listens for guardian's occurrence in Angular 2

The submit button is getting disrupted by the background image being set

Passing a value to a property with a dynamically passed name in TypeScript

The Replay Subject will not activate the async pipe when utilizing the subscribe shorthand during initialization

typescript dispatch issue

Tips for integrating Tesseract with Angular 2 and above