Получить действительный статус от нескольких форм до кнопки отправки

Question

У меня есть Компонент с несколькими формами и с одной кнопкой Submit вне всех форм.

В настоящее время я могу отправить формы без проверки. Я хочу ввести [Отключено], чтобы включить кнопку Submit при изменении срока действия Fomrs.

У меня есть одно такое решение @ Angular2 - Подтвердите и отправьте форму извне Это хорошо работает с одной формой.

Вот как выглядит мой 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 являются ссылочными переменными шаблона из файла компонента (.ts).