角度形式保持返回false（角度2）

Question

我有一个Angular 2中的表单，我正在通过模型驱动的方式进行验证。我想知道如何将状态从false更改为true，因为我具有验证规则，即使用户填写的所有内容都正确，它仍会使我无效（false）。这是HTML代码。

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

这里是组件。提前:)

Answer 1

您的问题是与电子邮件和电话验证。他们总是验证为false。

由于您使用的是反应形式，我建议你将你的pattern检查您的形式构建，例如：

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

然后我会假设你想从一开始就告知正确的字段是必需的。这可以在相当多的方式来完成，在这里我描述了两个可能的解决方案：

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

或：

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

，并在其他答复中提到，你不需要通过myForm.valid在提交。

我做了一个Plunker你，我在那里设置另一个电子邮件验证：

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

，只是随机的手机号码验证，因为我不知道到底是什么样的号码验证你需要。这一个检查电话号码只包含数字。

如果你愿意，你也可以禁用提交按钮，如果形式是无效的：

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

但这当然是你了！ :)

希望这有助于！

Answer 2

在角2

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

谢谢，它不需要传递（ngSubmit）的valid实体，只是通过所需的表单名称给该表单组指令。

(ngSubmit)="enviarMensagem(myForm)" 


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