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>