web-dev-qa-db-fra.com

Plusieurs formes en simple html angular2

J'ai le code suivant :

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

Les deux formes fonctionnent parfaitement lorsque je ne les valide pas, ou si je ne valide que l'un d'entre eux.

Ex:

servicesForm fonctionne bien avec la validation, mais lorsque je vais remplir technicianForm, cela ne valide pas même si je remplis les champs correctement.

technicianForm simplement pas répondre, il reste faux le technicianForm.form.valid

Donc, si je décolle #servicesForm, #technicianForm fonctionne parfaitement.

Comment puis-je valider ces champs de formulaires multiples, car je vais avoir plus de 2 formulaires sur la même page.

Dois-je effectuer une validation de formulaire sur mon fichier .ts pour chacun d'entre eux?

angulartypescriptangular-cliangular2-forms
4
vasconcelosvcd

Je poste donc une réponse pour que nous puissions clore cette question. Il y a plusieurs options.

1) Vous pouvez créer un composant distinct pour chaque formulaire et imbriquer ces composants dans un composant parent contenant l'ensemble de formulaires souhaité. Cela permet de bien séparer les préoccupations et de limiter la taille de chaque composant.

2) Si le but des formulaires multiples est de regrouper (et non de soumettre séparément), vous pouvez utiliser FormGroup pour suivre un ensemble de contrôles associé. Mais cela ne sonne pas comme le cas ici.

Vous pouvez également consulter les vidéos de Kara ici pour d'autres options et discussions: https://www.youtube.com/watch?v=MfILq1LNSUk

8
DeborahK

Vous pouvez également vérifier explicitement les erreurs de formulaire/de champ si vous vérifiez si le formulaire ou le champ n'est pas indéfini comme ceci:

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

Ou, si vous avez un champ obligatoire, par exemple, et souhaitez afficher une erreur (champ de saisie avec: # name = "ngModel"):

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

Cela a fonctionné pour moi avec plusieurs formulaires (construits comme # myform = "ngForm") dans un modèle avec un composant.

1
Guntram