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 reason for the inclusion of information in the error log by the `ng

Retrieve the radio button value without using a key when submitting a form in JSON

Having trouble typing computed values in Vue Composition API with TypeScript?

Is it necessary to manually unsubscribe from observables in the main Angular component?

What is the best way to retrieve the final value stored?

Unable to play audio src in Angular 2 due to http request issue

Discovering Angular 2 Service Change Detection

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

Parsing the header parameter in a GET request from Angular within the Spring backend

Filtering data in an antd table by searching

What distinguishes Angular directives as classes rather than functions?

Collaborate and apply coding principles across both Android and web platforms

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

The @Input directive is not compatible with the OnPush change detection strategy

Angular2 bootstrapping of multiple components

Optimize your code in Angular 5 by consolidating or restructuring numerous Subscribe calls

Issues with Ionic 3 Directive Not Functioning

I'm trying to troubleshoot this issue - the duration is showing up as NaN years, NaN months, NaN weeks, NaN days, NaN

Ways to retrieve the name of the chosen option from a dropdown menu

``Using backticks to denote HTML syntax - Leveraging Google Charts to create