1
resposta

validator somente apos o submit do form

Estou construindo uma aplicação em angular 2 que tem um formulário na tela que o usuario deve informar somente um e-mail para se inscrever em uma newsletter e tem um botão "enviar".

Seguindo o que aprendi no curso, conforme o usuario vai digitando o VALIDATOR do angular 2 vai sendo aplicado então ao informar o primeiro caractere do email, já é exibido "email invalido". Como faço pra aplicar o validator somente apos o click do botão "Enviar" ou fazer uma validação na funcao que cadastra a newsletter e retornar um erro de validator ao checar o email do usuario ?

COMPONENT SUBSCRIBE

export class SubscribeComponent {

    email: String;
    http: Http;
    formSubscribe: FormGroup;

    constructor(http: Http, fb: FormBuilder) {

        this.http = http;

        this.formSubscribe = fb.group({
            email: new FormControl('', [Validators.required, EmailValidator.validateEmail])
        });
    }

    cadastrar(event) {

        alert('acadastrandi');

        let url = "http://localhost:8080/test-service/api/newsletter";

        event.preventDefault();
        console.log(this.email);

        // cria uma instância de Headers
        let headers = new Headers();

        // Adiciona o tipo de conteúdo application/json 
        headers.append('Content-Type', 'application/json');

        this.http.post('v1/fotos', JSON.stringify(this.email), { headers: headers })
            .subscribe(() => {
                this.email = "";
                console.log('Newsletter salva com sucesso');
            }, erro => {
                console.log(erro);
            });
    }

}

HTML SUBSCRIBE

 <form [formGroup]="formSubscribe" (submit)="cadastrar($event)" class="subscribe-form" id="subscription-form">
                    <br /><br /><br /><br /><br /><br />
                    <div class="input-group">
                        <label class="sr-only" for="subscriber-email">Email address</label>
                        <input name="email" type="email" id="subscriber-email" class="form-control" placeholder="Informe seu e-mail" formControlName="email" [(ngModel)]="email">

                        <span class="input-group-addon">
                            <input id="subscribe-button" type="submit" class="btn btn-default" value="Assinar" style="margin-right:3px;" [disabled]="!formSubscribe.valid">
                        </span>
                    </div>
                    <!--/input-grpup-->

                </form>

                <!-- SUCCESS OR ERROR MESSAGES -->
                <div id="subscription-response">

                    <!-- SUCESSO -->
                    <div class="alert alert-success" role="alert" *ngIf="formSubscribe.valid">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="ion-close-circled" data-pack="default" data-tags="x"></i></button>
                        <span class="form-control alert-danger"><i class="fa fa-cog fa-spin"></i> <strong>Sucesso!</strong> e-mail cadastrado para receber nossa mala direta.</span>
                    </div>
                    <!-- SUCESSO -->

                    <!-- ERRO -->
                    <div class="alert alert-danger" role="alert" *ngIf="!formSubscribe.valid && !formSubscribe.controls.email.pristine">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="ion-close-circled" data-pack="default" data-tags="x"></i></button>
                        <span class="form-control alert-danger" *ngIf="formSubscribe.controls.email.errors.required"><i class="fa fa-cog fa-spin"></i>Por favor, informe um e-mail válido</span>
                        <span class="form-control alert-danger" *ngIf="formSubscribe.controls.email.errors.invalidEmail"><i class="fa fa-cog fa-spin"></i>E-mail inválido</span>
                    </div>
                    <!-- ERRO -->


                </div>
1 resposta

Oi Cateno!

Desativa o validador e faça um if no seu método de envio. Assim evita de você ficar brigando com o validador do Angular, como você disse, seu form é muito simples.