Form validation with angular 6

Question

I have this form, very simple, with just a field and a button. I gave a required input, and when I write with the empty and/or null field, it does not write(correct), but already switches to the list screen. This would be correct, if the recording of this ok. So I ask: How do I validate this form? THE 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

I did as the colleague Lucas Brogni guided me and still does not give the expected result: The button does not disable when the name field is null or Empty and when pressing the button, it does not save, but calls the route of the list of operators. Check out my 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>

Should not call the route, but stand still and display a message, as I have not put(yet) message, should remain on the same page.

EDIT2

My . 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 =>{
      }      
    );
  }
}

The idea would be to create a function(Isvalidatefield) and in it validate whether the field is valid, whether it is Dirty or pristine, Touched and etc.. and call this function in html.

EDIT3

How I would do a function to validate my Form/Field. I have this skeleton and I don’t even know if it’s the way:

isValidField(field: FormControlName, form: FormGroup){
     return (form: FormGroup) => {

     };
  }

In this case I am returning a form, now as I validate the fields of this form, to return true if the form is valid. That’s my correct approach?

Answer 1

You can release the create button only when the form is valid, for such you can do so:

 <button type="submit" [disabled]="!createForm.valid" class="btn btn-primary"><a routerLink="/operator">Criar</a></button>

Inside the form in the typescript do:

 this.createForm = this.builder.group({
      name: ['', Validators.required]
  })