Get Valid status from multiple Forms to out side submit button

Question

I have a Component having multiple forms in it and having one Submit button out side all the forms.

Currently I am able to Submit the forms without validation. i want o introduce [Disabled] toggle on Submit button on Fomrs validity changes.

I have got one such solution @ Angular2 - Validate and submit form from outside This works quite well with one form.

Here is how my HTML looks.

<div class="container">
  <div class="card">
    <div class="card-header d-flex">
      <h4 class="p2">
        Edit Programming
      </h4>
      <div class="p2 ml-auto">
        <button class="btn btn-outline-info" (click)="back()">
          <span class="fa fa-arrow-left"></span> Back
        </button>
      </div>
    </div>
    <div class="card-body">
      <span *ngIf="_isLoading" class="fa fa-spinner fa-spin"></span>
      <ngb-tabset *ngIf="!_isLoading">

        <ngb-tab title="Basic Details">
          <ng-template ngbTabContent>
            <form (ngSubmit)="onSubmit()" #nmRangeForm="ngForm">

              <div class="form-group row mt-2">
                <div class="col-sm">
                  <label for="dataSource" class="form-label d-block">Data Source</label>
                  <input type="text" name="dataSource" class="form-control" placeholder="N.A."
                    [(ngModel)]="_programming.dataSource" />
                </div>
                <div class="col-sm">
                  <label for="dataSourceExternalId" class="form-label d-block">Data Source External ID</label>
                  <input type="text" name="dataSourceExternalId" class="form-control" placeholder="N.A."
                    [(ngModel)]="_programming.dataSourceExternalId" />
                </div>
                <div class="col-sm">
                  <label for="dataSourceUpdateReference" class="form-label d-block">Data Source Update Reference</label>
                  <input type="text" name="dataSourceUpdateReference" class="form-control" placeholder="N.A."
                    [(ngModel)]="_programming.dataSourceUpdateReference" />
                </div>
                <div class="col-sm">
                  <label for="lastModifiedDataSource" class="form-label d-block">Last Modified Data Source</label>
                  <input type="datetime" name="lastModifiedDataSource" class="form-control" placeholder="N.A."
                    [ngModel]="_programming.lastModifiedDataSource | date: 'mediumDate'" />
                </div>
              </div>
              <hr />             
            </form>
          </ng-template>
        </ngb-tab>

        <ngb-tab title="Programming Parameters" *ngIf="_programming.programmingRecordParameters">
          <ng-template ngbTabContent>

              <form #ProgrammingParameterForm="ngForm" (ngSubmit)="onSubmit()">                
                  <div class="col-3">
                    <b class="form-label">
                      {{parameter.dataType}}
                    </b>
                  </div>
                   <input type="text" name="dataSourceUpdateReference" class="form-control" placeholder="N.A."
                    [(ngModel)]="_programming.dataSourceUpdateReference.parameter.dataValue" />                
              </form>           
          </ng-template>
        </ngb-tab>       
      </ngb-tabset>
      <div class="form-group d-flex">
        <button class="btn btn-outline-primary ml-auto" type="submit"  [disabled]="form.valid">
          <span class="fa fa-check-circle"></span>
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 1 · answered Jun 26 '19 at 05:44

1

All you have to do is to check if any of the forms valid or not, you can do so by using valid property of the form and you can check all the forms using && logical operator something like this:

   <button class="btn btn-outline-primary ml-auto" type="submit"  [disabled]="form1.valid && form2.valid && form3.valid"> 
      <span class="fa fa-check-circle"></span>
      Save Changes
    </button>

form1, form2 and form3 are the template reference variables from your component(.ts) file.

answered Jun 26 '19 at 05:44

vndpal

697
6
20

as per code i have mentioned in question i am getting `"ProgrammingParameterForm is not defined at eval"` Error at run time on button i have defined outside the form. Mu button code goes like

– SKDesai Jun 26 '19 at 21:46
it seems like you have not declared ProgrammingParameterForm in your component file. just declare an variable @ViewChild('ProgrammingParameterForm ') ProgrammingParameterForm:any; in your component file. If this does not solve your problem then edit your question and add the code in your component (.ts) file. – vndpal Jun 27 '19 at 05:28
I did add `@ViewChild('ProgrammingParameterForm ') ProgrammingParameterForm:ngForm;` in my TS. in fact I tried all possible variance like `@viewChild` , `@ViewChildern` , `@ContentChild` , `@ContentChildern`. Still wouldn't work. I am moving on to having a single from. Will update if that works. – SKDesai Jun 27 '19 at 21:53

Get Valid status from multiple Forms to out side submit button

1 Answers1