Multiple forms in single html angular2

Question

I have the following code :

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

Both forms work perfectly when i dont validate them, or if i just validate one of them.

Ex:

servicesForm works fine with the validation but when i go to fill the technicianForm it does not validate even if i fill the fields correctly.

technicianForm just not answer, it stays false the technicianForm.form.valid

So if i take off #servicesForm, #technicianForm works perfectly.

How can i validate those multiple forms fields, because i will have more 2 forms on the same page.

Do i have to make a form validation on my .ts file for each and one of them?

Would it be possible to put each form into its own nested component? It seems that it would be easier to manage without so much code in one template/component. — DeborahK
– DeborahK, Commented Jun 28, 2017 at 16:38
Yes, but will i have the same problem? because in the end will be the same code right ? — vasconcelosvcd
– vasconcelosvcd, Commented Jun 28, 2017 at 16:43
From your post, it sounded like the problem was the multiple forms in one component. If you put form 1 into component1 and form 2 into component 2 and nest them both into a parent component, then you should not have problems trying to validate two forms in the same component because they'd be in different components. Or did I misunderstand your issue? — DeborahK
– DeborahK, Commented Jun 28, 2017 at 16:45
Hmm, now i understand your point, i will try this, thanks!, but every time that i need more than 1 form i will have to do this way, that makes me feel awkward. — vasconcelosvcd
– vasconcelosvcd, Commented Jun 28, 2017 at 16:49

DeborahK · Accepted Answer · 2017-12-15 23:13:25Z

12

So I'm posting an answer so we can close this question. There are several options.

1) You could create a separate component for each form and nest those components in a parent component that contains the desired set of forms. That provides a good separation of concerns and keeps each component small.

2) If the purpose of the multiple forms is for grouping (and not separate submit) you could use FormGroup to track a related set of controls. But that does not sound like the case here.

You could also check out Kara's videos here for additional options and discussion: https://www.youtube.com/watch?v=MfILq1LNSUk

edited Dec 15, 2017 at 23:13

answered Jun 28, 2017 at 17:53

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guntram Over a year ago

I must admit, putting one form into one component or building dynamic forms are the better ways :)

moreirapontocom Over a year ago

Good idea! I put each form in its own component and I got awesome results. Thank you.

Guntram · Accepted Answer · 2017-07-25 17:03:45Z

1

You can also explicitly check for form errors/field errors if you check if the form or field is not undefined like this:

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

Or, if you have a required field, for example, and want to show an error (input field with: #name="ngModel"):

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

This worked for me with multiple forms (built like #myform="ngForm") in one template with one component.

answered Jul 25, 2017 at 17:03

Guntram

98015 silver badges20 bronze badges

Collectives™ on Stack Overflow

Multiple forms in single html angular2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related