Угловая форма продолжает возвращать false (Angular 2)

У меня есть форма в Angular 2, которую я проверяю на основе модели. Я хочу знать, как мне изменить статус с ложного на истинный, потому что у меня есть правила проверки, и даже если пользователь заполняет все правильно, он продолжает возвращать мне недействительный (ложный). Вот 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="[email protected]">
        <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>

А вот и компонент.

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

Заранее спасибо :)


javascript angular forms angular2-forms model-driven
person Renê Silva Lima    schedule 22.02.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Ваша проблема связана с проверкой электронной почты и телефона. Они всегда проверяются как false.

Поскольку вы используете реактивную форму, я бы посоветовал вам переместить ваши pattern проверки в вашу сборку формы, например:

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

Тогда я бы предположил, что вы хотите с самого начала сообщить, что поля обязательны. Это можно сделать несколькими способами, здесь я показываю два возможных решения:

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

or:

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

но это конечно ваше дело! :)

Надеюсь это поможет!

person AJT82    schedule 23.02.2017
comment
Мне очень помогло, большое спасибо, отличное объяснение :) - person Renê Silva Lima; 23.02.2017

arrow_upward
1
arrow_downward

В Angular 2 не требуется передавать объект valid в (ngSubmit), просто передайте требуемое имя формы, указанное в директиве группы форм.

(ngSubmit)="enviarMensagem(myForm)"


enviarMensagem({model, valid }: {model: Object, valid: boolean}) {
    this.submitted = true;      
    console.log(model, valid); 
}
person Shushanth Pallegar    schedule 22.02.2017
comment
Большое спасибо за подсказку, но я все еще ошибаюсь в правильности, у вас есть какие-либо идеи о том, что может произойти? - person Renê Silva Lima; 23.02.2017