web-dev-qa-db-ja.com

単一のhtml angular2の複数のフォーム

私は次のコードを持っています：

<md2-dialog #techniciansDialog>
  <md2-dialog-title color="primary">Técnicos</md2-dialog-title>
  <form #technicianForm="ngForm">
    <div style="display: table; width: 100%;">
      <div style="display: table; width: 100%;">
        <div style="vertical-align:middle; width:50%; display: table-cell;">
          <md-input-container>
            <input mdInput [(ngModel)]="technician.name" name="nameTechnician" type="text" placeholder="Nome" required>
          </md-input-container>
        </div>
      </div>

      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="technician.responsability" name="responsabilityTechnician" type="text"
                 placeholder="Responsabilidade" required>
        </md-input-container>
      </div>
    </div>

    <div style="display: table; width: 100%;">
      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="technician.phone" name="phoneTechnician" type="text" placeholder="Telefone"
                 required>
        </md-input-container>
      </div>

      <md-input-container>
        <input mdInput [(ngModel)]="technician.email" name="emailTechnician" type="text" placeholder="Email" required>
      </md-input-container>

      <md-input-container>
        <input mdInput [(ngModel)]="technician.password" name="passwordTechnician" type="password"
               placeholder="Password" required>
      </md-input-container>
    </div>
  </form>
  <md2-dialog-footer>
    <div *ngIf="!update;then content else other_content"></div>
    <ng-template #content>
      <button md-raised-button color="primary" [disabled]="!technicianForm.form.valid"
              (click)="gravarDadosTechnician(); technicianForm.reset()">Criar
      </button>
    </ng-template>
    <ng-template #other_content>
      <button md-raised-button color="primary" [disabled]="!technicianForm.form.valid"
              (click)="sendUpdateDadosTechnician(techniciansDialog); technicianForm.reset()">Atualizar
      </button>
    </ng-template>
    <button md-raised-button color="primary" (click)="closeDialog(techniciansDialog); technicianForm.reset()">Fechar
    </button>
  </md2-dialog-footer>

</md2-dialog>

<md2-dialog #serviceDialog>
  <md2-dialog-title color="primary">Serviços</md2-dialog-title>
  <form #servicesForm="ngForm" name="servicesForm">
    <div style="display: table; width: 100%;">
      <div *ngIf="!update;then divcreate else divupdate"></div>
      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="service.name" name="nameService" type="text" placeholder="Nome" required>
        </md-input-container>
      </div>
    </div>

    <div style="display: table; width: 100%;">
      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="service.SLA" name="SLA" type="text" placeholder="SLA (HORAS)" required>
        </md-input-container>
      </div>

      <div style="vertical-align:middle; width:50%; display: table-cell;">
        <md-input-container>
          <input mdInput [(ngModel)]="service.description" name="descriptionService" type="text"
                 placeholder="description"
                 required>
        </md-input-container>
      </div>
    </div>
  </form>

  <md2-dialog-footer>
    <div *ngIf="!update;then content else other_content"></div>
    <ng-template #content>
      <button md-raised-button color="primary" [disabled]="!servicesForm.form.valid"
              (click)="gravarDadosServices(); servicesForm.reset()">Criar
      </button>
    </ng-template>
    <ng-template #other_content>
      <button md-raised-button color="primary" [disabled]="!servicesForm.form.valid"
              (click)="sendUpdateDadosServices(serviceDialog); servicesForm.reset()">Atualizar
      </button>
    </ng-template>
    <button md-raised-button color="primary" (click)="closeDialog(serviceDialog); servicesForm.reset()">Fechar</button>
  </md2-dialog-footer>

</md2-dialog>

どちらの形式も、検証しない場合、またはどちらか一方のみを検証する場合に完全に機能します。

例：

servicesFormは検証で問題なく機能しますが、technicianFormに入力すると、フィールドに正しく入力しても検証されません。

technicianForm答えられないだけで、偽のままですtechnicianForm.form.valid

だから私が離陸する場合#servicesForm、#technicianFormは完全に機能します。

同じページに2つ以上のフォームがあるため、これらの複数のフォームフィールドを検証するにはどうすればよいですか。

それぞれの.tsファイルでフォーム検証を行う必要がありますか？

angulartypescriptangular-cliangular2-forms
7
vasconcelosvcd

それで、私は答えを投稿して、この質問を閉じます。いくつかのオプションがあります。

1）フォームごとに別個のコンポーネントを作成し、それらのコンポーネントを、必要なフォームのセットを含む親コンポーネントにネストできます。これにより、問題を適切に分離し、各コンポーネントを小さく保つことができます。

2）複数のフォームの目的がグループ化（個別の送信ではない）である場合は、FormGroupを使用して、関連する一連のコントロールを追跡できます。しかし、ここではそうではありません。

その他のオプションとディスカッションについては、こちらのKaraのビデオもご覧ください。 https://www.youtube.com/watch?v=MfILq1LNSUk

12
DeborahK

次のようにフォームまたはフィールドが未定義でないかどうかを確認する場合は、フォームエラー/フィールドエラーを明示的に確認することもできます。

[disabled]="technicianForm && technicianForm.form.invalid"

または、たとえば必須フィールドがあり、エラーを表示したい場合（＃name = "ngModel"の入力フィールド）：

<div class="col-md-12 text-danger" *ngIf="name && name.errors && name.touched">
    {{ '_MY_NAME_ERROR_' | translate }}
</div>

これは、1つのコンポーネントを持つ1つのテンプレート内の複数のフォーム（＃myform = "ngForm"のように作成）で機能しました。

1
Guntram