Question

我有一个组件，里面有多种形式，并且所有形式旁边都有一个Submit按钮。

当前，我可以提交表单而无需验证。我要介绍Fomrs有效性更改时，在Submit按钮上启用[Disabled]切换。

我有一个这样的解决方案@ Angular2 - Validate and submit form from outside 只需一种形式，效果很好。

这是我的HTML外观。

<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>

Answer 1

您要做的就是检查表单是否有效，您可以使用表单的有效属性来执行此操作，还可以使用&&逻辑运算符检查所有表单，如下所示：

   <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和form3是来自component（.ts）文件的模板引用变量。

从多个表单获取有效状态到外部提交按钮

1 个答案: