Подтвердить реактивную форму после установки значений в Angular 5?

Question

Я устанавливаю вручную реактивную форму, когда происходят некоторые события. Они обновляются, хотя и не проходят никакой проверки.

Это было бы что-то вроде

this.FORM.controls.WHATEVERINPUT.setValue(X);

Дело в том, что я использую Material Design и Angular 5, поэтому в шаблоне у меня есть эта структура

<mat-form-field>
<input matInput formControlName="WHATEVERINPUT">
<mat-error *ngIf="FORM?.controls.WHATEVERINPUT.errors">
 ... is required & Minimum of 5 characters
</mat-error>
</mat-form-field>

, который работает совершенно нормально, за исключением тех значений, которые я упоминал ранее.

Я уже немного поиграл в контроллер с

  this.FORM.controls.WHATEVERINPUT.markAsTouched();
    this.FORM.controls.WHATEVERINPUT.markAsDirty();
    this.FORM.updateValueAndValidity();

несколькими способами, но я еще не получил значение проверено

Я ценю, если кто-то может мне помочь Спасибо

Answer 1

РЕДАКТИРОВАТЬ: Простой ответ

Вы можете позвонить this.form.get('username').markAsTouched(); после установки значения.

Другой ответ

Если вы поместите свои кнопки внутри формы, добавьте (ngSubmit)="USR($event)" в качестве атрибута к тегу формы и добавьте type="submit" к вашей кнопке, вы сделаете Angular определение, если форма действительна или нет, а затем ошибка сообщение будет отображаться.

<form class="example-form" [formGroup]="form" (ngSubmit)=USR($event)>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Username" formControlName="username">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Password" formControlName="password">
  </mat-form-field>

  <button mat-raised-button type="button" color="primary" [style.margin]="'12px'" (click)="PWD()">Update password with value</button>
  <button type="submit" mat-raised-button color="primary" [style.margin]="'12px'">Update username required error</button>
</form>

Вот рабочий пример