Mehrere Formulare in eine einzige html-angular2

Ich habe den folgenden code :

HTML:

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

Beide Formen perfekt funktionieren, wenn ich nicht überprüfen kann, oder ob ich einfach nur zu validieren einer von Ihnen.

Ex:

servicesForm funktioniert gut mit der Validierung, aber wenn ich gehe, um zu füllen das technicianForm es überprüft nicht, auch wenn ich füllen Sie die Felder korrekt.

technicianForm einfach nicht beantworten, es bleibt falsch die technicianForm.form.valid

Also, wenn ich ausziehen #servicesForm, #technicianForm funktioniert perfekt.

Wie kann ich überprüfen diejenigen, die mehrere Formen der Felder, weil ich haben noch 2 Formulare auf der gleichen Seite.

Muss ich noch ein Formular-Validierung auf meine .ts-Datei für jede von Ihnen?

Wäre es möglich, jedes Formular in Ihre eigenen verschachtelten Komponente? Es scheint, dass es wäre leichter zu verwalten, ohne so viel code in eine template/Komponente.
Ja, aber ich habe das gleiche problem? denn am Ende wird der gleiche code richtig ?
Aus Ihrem post, es Klang wie das problem war, der mehrere Formen in einem Bauteil. Wenn Sie Formular 1 in component1 und form 2 in Komponente 2 und verschachteln Sie Sie beide in eine übergeordnete Komponente, dann sollten Sie keine Probleme haben, versuchen zu validieren beiden Formen in der gleichen Komponente, denn Sie würden in verschiedene Komponenten. Oder habe ich es falsch verstehen, Ihr Problem?
Hmm, jetzt verstehe ich deinen Punkt, ich werde dies versuchen, vielen Dank!, aber jedes mal, brauche ich mehr als 1-form habe ich zu tun auf diese Weise, das macht mich unangenehm.
Okey, ja das hat geklappt, vielen Dank für die Hilfe!

InformationsquelleAutor vasconcelosvcd | 2017-06-28

10

So, ich bin der Buchung eine Antwort, so können wir schließen diese Frage. Es gibt mehrere Optionen.

1) Sie können eine separate Komponente für jede form und jedes nest diese Komponenten in einer übergeordneten Komponente, enthält das gewünschte set von Formen. Das bietet eine gute Trennung von Bedenken und hält jede Komponente klein ist.

2) Wenn der Zweck der verschiedenen Formen ist für die Gruppierung (und nicht getrennt übermitteln), die Sie nutzen könnten FormGroup zu verfolgen, eine zugehörige Gruppe von Steuerelementen. Aber das klingt nicht wie hier der Fall.

Könnten Sie auch prüfen, die Kara ' s videos hier zusätzliche Optionen und Diskussion: https://www.youtube.com/watch?v=MfILq1LNSUk
- Ich muss zugeben, dass ein Formular in einer Komponente oder erstellen dynamischer Formulare, die bessere Möglichkeiten 🙂
- Gute Idee! Lege ich jedem form in seiner eigenen Komponente und ich habe tolle Ergebnisse. Danke.
InformationsquelleAutor DeborahK
1

Können Sie auch explizit zu überprüfen, für den form-Fehler/Fehler im Feld, wenn Sie überprüfen, ob die form oder das Feld ist nicht undefiniert wie diese:
```
[disabled]="technicianForm && technicianForm.form.invalid"
```
Oder, wenn Sie einem erforderlichen Feld, zum Beispiel, und wollen zeigen, einen Fehler (input-Feld mit: #name="ngModel"):
```
<div class="col-md-12 text-danger" *ngIf="name && name.errors && name.touched">
    {{ '_MY_NAME_ERROR_' | translate }}
</div>
```
Dieser arbeitete für mich mit mehreren Formen (gebaut wie #myform="ngForm") in eine Vorlage mit einer Komponente.

InformationsquelleAutor Guntram

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.