Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Erro na validação de formulário

Ola, por algum motivo, a validação do formulário de cadastro de imagens apresentado na aula 7 atividade 2 só funciona se eu deixar o atributo 'Required' do meu html no input. Se eu não usar ele minha aplicação não apresenta a mensagem de alert-danger nem mesmo bloqueia o botão de submit, porém nenhum erro é apresentado no console. Segue o código do contruct da cadastro.component conforme realizado no curso:

/* IMPORTS*/
import { Component } from '@angular/core';
import { FotoComponent } from '../foto/foto.component';
import { Http, Headers } from '@angular/http';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

constructor(http: Http, fb: FormBuilder){
        this.http = http;
        this.meuForm = fb.group({
            titulo: [Validators.required],
            url: [Validators.required],
            descricao: []
        });
5 respostas

Oi Aparecida, boa tarde!

Pode compartilhar o código do componente inteiro, inclusive do template do componente? Assim fica mais fácil para eu estudar o que esta acontecendo.

Sim claro, só uma observação, usando a ferramenta de debug verifiquei que no local do span o angular retornou false para a condição do if:

<!--template bindings={
  "ng-reflect-ng-if": "false"
}-->

Código do component:

import { Component } from '@angular/core';
import { FotoComponent } from '../foto/foto.component';
import { Http, Headers } from '@angular/http';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'cadastro',
    templateUrl: './cadastro.component.html'
})
export class CadastroComponent {
    foto: FotoComponent = new FotoComponent();
    http: Http;
    meuForm: FormGroup;
    constructor(http: Http, fb: FormBuilder){
        this.http = http;

        this.meuForm = fb.group({
            titulo: ["", Validators.required],
            url: ["", Validators.required],
            descricao: [""]
        });
    }

    cadastrar(event){
        event.preventDefault();

        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http
            .post('v1/fotos', JSON.stringify(this.foto), {headers : headers})
            .subscribe( () => {
                //Limpar o formulario
                this.foto = new FotoComponent();
            }, erro => console.log(erro) );
    }
}

Template:

<div class="container">
<form [formGroup]="meuForm" class="row" (submit)="cadastrar($event)">
        <div class="col-md-6">
            <div class="form-group">
                <label>Titulo</label>

                <input
                    formControlName="titulo" 
                    name="titulo" 
                    [(ngModel)]="foto.titulo" 
                    class="form-control">

                <span *ngIf="meuForm.controls.titulo.invalid" class="form-control alert-danger">
                    Titulo Obrigatório!
                </span>
            </div>

            <div class="form-group">
                <label>URL</label>
                <input 
                    formControlName="url" 
                    name="url" 
                    [(ngModel)]="foto.url" 
                    class="form-control">
                <span *ngIf="meuForm.controls.url.invalid" class="form-control alert-danger">
                    URL Obrigatória!
                </span>
            </div>

            <div class="form-group">
                <label>Descrição</label>
                <textarea formControlName="descricao" name="descricao" [(ngModel)]="foto.descricao" class="form-control"></textarea>
            </div>

            <button type="submit" class="btn btn-primary" [disabled]="meuForm.invalid">
                Salvar
            </button>

            <a [routerLink]="['']" class="btn btn-primary">Voltar</a>
            <hr>
        </div>
    </form>
</div>

Olá Aparecida! Ainda estou tentando descobrir o problema. Por exemplo, usei o código do seu formulário e do seu componente e a validação funcionou. Sendo assim, para eu ter certeza que estou compreendendo o problema, veja se é assim que acontece:

1 - quando você abre o formulário pela primeira vez, o padrão é exibir a mensagem de preenchimento obrigatório. Pelo o que eu entendi, não exibe, certo?

2 - o código que você compartilhou é aquele que não esta funcionando como esperado, certo?

Quando puder, me dá esse feedback.

solução!

Flavio, limpei o cache do chrome e funcionou :)

Respondendo suas perguntas é sim para as duas.

Quando colocava o atributo required nos inputs o angular me retorna TRUE no ngIf do span e por consequência a validação funcionava corretamente, inclusive o botão de submit com disabled. Agora se não utilizava o required o ngIf retornava FALSE, ou seja, não exibia o alert e liberava o botão submit.

Vai entender. Mesmo assim obrigada!

Puxa! Essa do cache eu tentaria como última solução, que bom que já foi para ela resolvendo o problema.

Vou até marcar sua resposta como solução para que ganhe os pontos.

Sucesso e bom estudo Aparecida!