Tenho esse formulário, bem simples, apenas com um campo e um botão. Dei um required no input, e quando eu gravo com o campo vazio e/ou nulo, ele não grava(correto), mas já muda para a tela de lista. Isso seria correto, se o gravar desse ok. Então eu pergunto: Como eu valido esse formulário? O HTML
<div class="container">
<form [formGroup]="createForm" (ngSubmit)="onPostCreateOperator()" style="width:400px; margin: 0 auto;">
<h1>Operadores</h1>
<div class="required-field-block">
<input formControlName="name" type="text" placeholder="Nome" class="form-control" required>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
<button type="submit" class="btn btn-primary"><a routerLink="/operator">Criar</a></button>
</form>
</div>
EDIT1
Fiz conforme o colega Lucas Brogni me orientou e continua não dando o result esperado: O botão não fica disable quando o campo nome está null ou empty e ao pressionar o botão, ele não grava, mas chama a rota da lista de operadores. Veja como está meu HTML
<div class="container">
<form [formGroup]="createForm" (ngSubmit)="onPostCreateOperator()" style="width:400px; margin: 0 auto;">
<h1>Operadores</h1>
<div class="required-field-block">
<input formControlName="name" type="text" placeholder="Nome" class="form-control" required>
</div>
<!-- <button type="submit" class="btn btn-primary">Criar</button> -->
<button type="submit" [disabled]="!createForm.valid" class="btn btn-primary"><a routerLink="/operator">Criar</a></button>
</form>
</div>
Não deveria chamar a rota, mas ficar parado e exibir uma mensagem, como não coloquei(ainda) mensagem, deveria permanecer na mesma página.
EDIT2
Meu .ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CreateOperatorService } from '../../Services/Operators/create-operator.service';
@Component({
selector: 'app-create-operator',
templateUrl: './create-operator.component.html',
styleUrls: ['./create-operator.component.css']
})
export class CreateOperatorComponent implements OnInit {
createForm :FormGroup;
private _createOperator: Model.CreateOperators;
constructor(private _createOperatorService: CreateOperatorService, private builder: FormBuilder) {
this.createForm = this.builder.group({
name: ['', Validators.required]
})
}
ngOnInit() {
}
isValidateField(field: FormControlName, form: FormGroup){
}
onPostCreateOperator(){
this._createOperator = this.createForm.value;
this._createOperatorService.postCreateOperators(this._createOperator)
.subscribe( success => {
if(success.Result){
}
},
error =>{
}
);
}
}
A idéia seria criar uma função(IsValidateField) e nela validar se o campo é válido, se é dirty ou pristine, touched e etc.. e chamar essa função no html.
EDIT3
Como eu faria uma função para validar meu Form/Campo. Tenho esse esqueleto e nem sei se é o caminho:
isValidField(field: FormControlName, form: FormGroup){
return (form: FormGroup) => {
};
}
Nesse caso estou retornando um form, agora como eu valido os campos desse form, para retornar true se o forma estiver válido. Esta correto essa minha abordagem?