Angular 6 - Validate and submit form from outside the form

Question

<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));
    });
  }
}

Answer 1

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

Answer 2

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));
       });
   }
}

Answer 3

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.

Answer 4

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

Answer 5

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>