CODEWITHSUNDEEP
angularangular-material
Dani
Dani

Reputation: 807

Angular 6 - Validate and submit form from outside the form

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)">
...
</form>

Here I'm using Angular 6 Reactive forms.

So my outside button is,

<button mat-icon-button type="submit">
      <img src="../../../../../../assets/images/icon/save-1.svg"/>
</button>

So I want to validate the form and submit. And if there are validation errors save button should be disabled.

Here is the onSubmit() implementation. 

onSubmit(form : FormGroup){
this.shareObjectRequest = this.shareObjectForm.value;
if (form.value.id != null) {
  this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
    result => {
    },
    err => {
      console.log("Error Occured." + JSON.stringify(err));
    });
}
else {
  this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
    result => {
    },
    err => {
      console.log("Error Occured" + JSON.stringify(err));
    });
  }
}

Upvotes: 3

Views: 6973

Answers (5)

Christoph L&#252;tjen
Christoph L&#252;tjen

Reputation: 5804

Assuming we have (simplified code)

class MyComponent {
   myForm = new FormGroup();
   doSave() {
      const form = this.myForm;
      // form.value.id
   }
}

<form [formGroup]="myForm" (ngSubmit)="doSave()">
...
</form>
<ng-container *ngIf="myForm.valid">
  your button if valid
  <button (click)="doSave()">Save</button>
</ng-container>
<ng-container *ngIf="!myForm.valid">
  your button if NOT valid
</ng-container>

Now ...

  • You can call doSave() everywhere in your view.
  • myForm.valid will give you the info if your form is valid. You can use two separate sections as in my example if [disabled]="myForm.valid" does not work for you.

Upvotes: 1

Chema
Chema

Reputation: 936

If you already have done the FormGroup in the component and thats what you are binding to in the template you just need to reference the FormGroup again in the disabled attr.

Even when in my example the button is inside form that's irrelevant, 'cause you are using the a variable declared in the component as a reference, therefore you could use it where ever in your html

<form autocomplete="off" [formGroup]="actualFormGroup" (ngSubmit)="submitForm()" class="data-form">
  ...

  <div class="button-wrapper">
    <button class="classic-purple-button cursor-pointer no-outline" [disabled]="!actualFormGroup.valid" type="submit">
        Continuar
    </button>
  </div>
</form>

Upvotes: 0

Dani
Dani

Reputation: 807

Here is my answer. But button is not shaded here.For that I need to use ngStyle in the button.

<button form="ngForm" mat-icon-button type="submit" [disabled]="myform.invalid">
      <img  src="../../../../../../assets/images/icon/save-1.svg"/>
</button>

<form [formGroup]="myform" (ngSubmit)="onSubmit(shareObjectForm)" id="ngForm">
</form>

onSubmit(form : FormGroup){
   this.shareObjectRequest = this.shareObjectForm.value;
   if (form.value.id != null) {
      this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
         result => {
      },
         err => {
           console.log("Error Occured." + JSON.stringify(err));
         });
    }
    else {
       this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
         result => {
         },
         err => {
            console.log("Error Occured" + JSON.stringify(err));
       });
   }
}

Upvotes: 1

Shashikant Devani
Shashikant Devani

Reputation: 2455

Create Form With or without form tag.

Fire validation from your ts.

submitForm() {
   for (let v in this.exampleForm.controls) {
         this.exampleForm.controls[v].markAsTouched();
   }
   if (this.exampleForm.valid) {

   }
}

And use (click) inside your html.

<button type="submit" class="btn btn-primary"
 (click)="submitForm()">Submit</button>
</div>

Check this Stackblitz

Upvotes: 0

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9754

This is achievable in HTML5 form.

<form id="myform" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
.......
</form>

<div class="form-group">
   <button type="submit" class="btn btn-primary"  form="myform">Register</button>
</div>

Created a stackblitz https://stackblitz.com/edit/angular-pwu69r

Upvotes: 5

Related Questions