Winkelform immer falsch (Angular 2)

Question

Ich habe eine Form in Angular 2, die ich durch den modellgesteuerten Weg validiere. Ich möchte wissen, wie ich den Status von falsch zu wahr ändern kann, weil ich die Regeln der Validierung habe und selbst wenn der Benutzer alles richtig macht, gibt es mich immer wieder ungültig (falsch). Hier ist der HTML-Code.

<div class="wrap-page"> 
    <form [formGroup]="myForm" novalidate class="form-contato" (ngSubmit)="enviarMensagem(myForm.value, myForm.valid)"> 
    <div class=row> 
     <div class="col s12"> 
     <h4> Contato </h4> 
     </div> 
     <div class="col s12 m12 l6"> 
     <label> Nome: </label> 
     <input type="text" name="nome" formControlName="nome" class="forms-econ" required placeholder="ex: José Silva"> 
     <div class="div-validar"> 
      <span [hidden]="myForm.controls.nome.valid || (myForm.controls.nome.pristine && !submitted)"> 
      Nome Inválido (mínimo 3 caracteres). 
      </span> 
     </div> 
     </div> 
     <div class="col s12 l6"> 
     <label> E-mail: </label> 
     <input type="email" class="forms-econ" formControlName="email" required name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" 
      placeholder="exemplo@exemplo.com"> 
     <div class="div-validar"> 
      <span [hidden]="myForm.controls.email.valid || (myForm.controls.email.pristine && !submitted)"> 
      E-Mail inválido 
      </span> 
     </div> 
     </div> 


     <div class="col s12 l6"> 
     <label>Telefone: </label> 
     <input type="tel" class="forms-econ" name="telefone" formControlName="telefone" pattern="[0-9]" placeholder="(xx)9 9999-99999"> 
     </div> 
     <div class="col s12 l6"> 
     <label> Motivo do Contato: </label> 
     <select name="assunto" formControlName="assunto" class="forms-econ"> 
      <option value="motivo_01">Motivo 01</option> 
      <option value="motivo_02">Motivo 02</option> 
      <option value="motivo_03">Motivo 03</option> 
      <option value="motivo_03">Motivo 04</option> 
     </select> 

     </div> 
     <div class="col s12"> 
     <label> Mensagem: </label> 
     <textarea name="mensagem" formControlName="mensagem" placeholder="Mensagem..." rows="15"> 
     </textarea> 
     <div class="div-validar"> 
      <span [hidden]="myForm.controls.mensagem.valid || (myForm.controls.mensagem.pristine && !submitted)"> 
      O campo mensagem é obrigatório 
      </span> 
     </div> 
     </div> 
     <div class="col s12"> 
     <label> ID: </label> 
     <textarea name="id" formControlName="id" placeholder="Mensagem..." rows="15"> 
     </textarea> 
     </div> 
     <h1> {{myForm.valid | json}} </h1> // <-- Here is where I'm printing the status of the form (always return false) 
     <div class="col s12 right-align"> 
     <input type="submit" value="Enviar" class="btn-form"> 
     </div> 

    </div> 
    </form> 
</div> 

Und hier ist die Komponente.

import { Component, Input } from '@angular/core'; 
import {FormGroup, FormControl, FormBuilder, Validators} from '@angular/forms'; 
import {formContato} from './contato.interface'; 
import {ContatoService} from './contato.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'contato', 
    templateUrl: `contato.component.html`, 
    providers: [ContatoService] 
}) 
export class ContatoComponent { 

    public contato:formContato; 
    public myForm: FormGroup; 
    public submitted: boolean; 
    public events: any[] = []; 

    constructor(private _fb: FormBuilder, private mensagemContato:ContatoService) { } 

    ngOnInit() { 
     this.myForm = this._fb.group({ 
     nome: ['', [<any>Validators.required, <any>Validators.minLength(3)]], 
     email: ['', <any>Validators.required], 
     telefone: ['', <any>Validators.required], 
     assunto: ['', <any>Validators.required], 
     mensagem: ['', <any>Validators.required], 
     id: [''] 
     })  
    } 


    enviarMensagem(model: formContato, isValid: boolean) { 
     this.submitted = true;  
     console.log(model, isValid); // -< another way to print the status of the form (always false) 
    } 
} 

Vielen Dank im Voraus :)

Answer 1

Ihr Problem ist mit der Validierung von E-Mail und Telefon. Sie validieren immer als false.

Da Sie eine reaktive Form verwenden, würde ich vorschlagen, dass Sie Ihre pattern prüft Ihre Build der Form bewegen, zB:

email: ['', [<any>Validators.required, Validators.pattern(....)]], 

Dann würde ich davon ausgehen, dass Sie von Anfang an informieren möchten, dass Felder sind Pflichtfelder. Dies kann in ganz wenigen Arten erfolgen, hier zeige ich zwei mögliche Lösungen:

<span *ngIf="myForm.get('nome').hasError('required')"> 
    Name required! 
</span><br> 

oder:

<span *ngIf="!myForm.controls.nome.pristine"> 
    Name required! 
</span><br> 

und wie in anderen Antwort erwähnt, müssen Sie nicht die myForm.valid in der einreichen passieren .

Ich habe einen Plunker für Sie, wo ich eine andere E-Mail-Validierung gesetzt:

EMAIL_REGEXP = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$'; 

und nur eine zufällige Telefonnummer Validierung, da ich nicht sicher, genau das war, was für Nummer Validierung Sie brauchen. Dieser überprüft, dass die Telefonnummer nur Nummern enthält.

Wenn Sie möchten, können Sie auch den Absenden-Button deaktivieren, wenn das Formular nicht gültig ist:

<input [disabled]="!myForm.valid" type="submit" value="Enviar" class="btn-form"> 

aber das ist natürlich bis zu Ihnen! :)

Hoffe, das hilft!

Answer 2

In Angular 2, es ist nicht auf (ngSubmit) die valid Einheit passieren erforderlich, geben Sie einfach die gewünschte Form Namen Form Gruppe Richtlinie geben.

(ngSubmit)="enviarMensagem(myForm)" 


enviarMensagem({model, valid }: {model: Object, valid: boolean}) { 
    this.submitted = true;  
    console.log(model, valid); 
}