Как добавить валидацию к TD-form?

Question

[zlodiak]

Я сделал template driven form. Но не понимаю как можно добавить валидацию полей. При этом я записал правила валидации в объект.

Помогите пожалуйста их реализовать, хотя бы для одного поля(остальное я сам доделаю по аналогии). Отображение сообщений об ошибках не нужно, главное чтобы поля валидировались.

Живой пример тут.

Вот код шаблона:

<form class="form" (ngSubmit)="onSubmit()">
      <div class="line">
        <label for="">Новый пароль</label>
        <input type="password" ngModel [(ngModel)]="form.newPass" name="newPass" (ngModelChange)="validateField('newPass')">     
      </div>
        
      <div class="line">
        <label for="">Новый логин</label>
        <input type="text" ngModel [(ngModel)]="form.newLogin" name="newLogin" (ngModelChange)="validateField('newLogin')">
      </div>
  
      <div class="line">
        <label for="">Согласие на использование персональных данных</label>
        <input type="checkbox" value="true" ngModel [(ngModel)]="form.personalData" name="personalData" (ngModelChange)="validateField('personalData')">
      </div>
  
      <div class="line">
        <button [disabled]="isDisabledSubmitBtn()" type="submit">Отправить</button>
      </div>
    </form>

Вот код компонента:

form: Object = {
    newPass: null,
    newLogin: null,
    personalData: null
  };

  errors: Object = {
    newPass: [],
    newLogin: [],
    personalData: []
  };

  constructor() { }

  ngOnInit() {
  }

  onSubmit(): void {
    alert('form is submit');
  }

  validateField(field): void {
    console.log(field);
  }

  isDisabledSubmitBtn(): boolean {
    let isDisabled = true;

    if(
      !this.errors.newPass.length && this.form.newPass &&
      !this.errors.newLogin.length && this.form.newLogin &&
      !this.errors.personalData.length && this.form.personalData
    ) 
    {
      isDisabled = false;
    }

    return isDisabled;
  }

    validators: any = {
        newPassword: [
            {
                message: 'Новый пароль должен содержать не менее 8 и не более 99 символов',
                validator: (control) => {
                    return Validators.minLength(8)(control) || Validators.maxLength(99)(control);
                }
            },
            {
                message: `Введен недопустимый символ. Допустимые символы: a-zA-Z0-9а-яА-Я!@#%&*;':",./?`,
                validator: (control) => {
                    if (control && control.value) {
                        return /[^A-ZА-Яa-zа-я\d!@#%&*;‘:“,./?.]/.test(control.value) ? true : null;
                    }
                    return null;
                }
            }
        ],
        newLogin: [
            {
                message: 'Новый логин должен содержать не менее 6 и не более 15 символов',
                validator: (control) => {
                    return Validators.minLength(6)(control) || Validators.maxLength(15)(control);
                }
            },
            {
                message: `Введен недопустимый символ. Допустимые символы: a-z`,
                validator: (control) => {
                    if (control && control.value) {
                        return /[^a-z]/.test(control.value) ? true : null;
                    }
                    return null;
                }
            }
        ]
    };