Login form - angular 6, reactive forms

<form
    [formGroup]="loginForm"
    (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label for="userName">Email address</label>
      <input
        email
        type="email"
        id="userName"
        name="userName"
        formControlName="userName"
        placeholder="Enter email"
        class="form-control"
        [ngClass]="{
          'is-invalid': util.validateField(f.userName, submited)
        }"
        trim="blur">
      <div
        class="invalid-feedback"
        *ngIf="util.validateField(f.userName, submited)">
        <div *ngIf="f.userName.errors.required">Email is required</div>
        <div *ngIf="f.userName.errors.email">Email is invalid</div>
      </div>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input
        type="password"
        id="password"
        name="password"
        formControlName="password"
        placeholder="Password"
        class="form-control"
        [ngClass]="{
          'is-invalid': util.validateField(f.password, submited)
        }"
        trim="blur">
      <div
        class="invalid-feedback"
        *ngIf="util.validateField(f.password, submited)">
        <div *ngIf="f.password?.errors.required">Password is required</div>
        <div *ngIf="f.password?.errors.minlength">
          Password must be at least 6 characters long
        </div>
      </div>
    </div>

    <div class="form-check">
      <input
        type="checkbox"
        class="form-check-input"
        id="rememberMeChecked"
        name="rememberMeChecked"
        formControlName="rememberMeChecked">
      <label
        class="form-check-label"
        for="rememberMeChecked">
        Check me out
      </label>
    </div>

    <div class="text-center mt-4">
      <button
        [disabled]="submited && loginForm.invalid"
        type="submit"
        class="btn btn-primary px-4">
        Submit
      </button>
    </div>

  </form>

ts Login form - angular 6, reactive forms

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

/* 
  validateField(field: AbstractControl, submited?: boolean) {
      return field.invalid && (field.dirty || field.touched || submited);
  } 
*/
import { UtilService } from '@core/services/util/util.service';
import { LoginService } from '@core/services/auth/login.service';
import { AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  returnUrl: string;

  loginForm: FormGroup;
  submited = false;

  // convenience getter for easy access to form fields
  get f(): { [key: string]: AbstractControl } {
    return this.loginForm.controls;
  }

  constructor(
    public util: UtilService,
    private loginService: LoginService,
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  onSubmit() {

    this.submited = true;

    // stop here if form is invalid
    if (this.loginForm.invalid) {
      return false;
    }

    this.loginService.login(this.loginForm.value)
      .subscribe(() => {

        // Store user info to localStorage
        this.loginService.storeUserInfo().subscribe();

        // Redirect to saved or to home page
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
        this.router.navigate([this.returnUrl]);
      });
  }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      userName: [
        '',
        Validators.compose([
          Validators.required,
          Validators.email,
          Validators.maxLength(256)
        ])
      ],
      password: [
        '',
        Validators.minLength(6)
      ],
      rememberMeChecked: [false],
    });
  }
}