Form validation with angle 6

I have this form, very simple, with only one field and one button. I gave a required input, and when I write with the empty field and / or null, it does not record (correct), but it already changes to the list screen. That would be correct, if you write that ok. So I ask: How do I validate this form? 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 colleague Lucas Brogni directed me and still does not give the expected result: The button does not become disable when the field name is null or empty and pressing the button, it does not record, but calls the route of the list of operators . Here's how my HTML is

<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>

You should not call the route, but stand still and display a message, as I have not (yet) posted a message, it 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 validate if the field is valid, whether it is dirty or pristine, touched and so on .. and call that function in html.

EDIT3

How would I do a function to validate my Form / Field. I have this skeleton and I do not know if it is the way:

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

     };
  }

In this case I'm returning a form, now how do I validate the fields of this form, to return true if the form is valid. Is this correct in my approach?