mat-form-field всегда показывает требуемый красный цвет? - PullRequest
Новая
       9

mat-form-field всегда показывает требуемый красный цвет?

0 голосов
/ 16 ноября 2018

Есть ли способ всегда показывать красный цвет mat-form-field, когда у него есть required="true", даже если я никогда не фокусировался на нем или не касался его? 

<mat-form-field color="accent">
  <input matInput placeholder="ID is required" required="true [(ngModel)]="uniqueID">
</mat-form-field>

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

Как это возможно?

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Следующая демонстрация демонстрирует требуемый случай в существующей угловой реактивной форме материала.

Демонстрация применения:
https://stackblitz.com/edit/example-angular-material-reactive-form-2rksrw?file=app/app.component.ts

Подход:

  • В ngOnInit мы можем получить элемент ввода из формы и изменить его как
    this.formGroup.get('name').markAsTouched();
  • Мы также можем использовать свойство touched входных данных from как
    this.formGroup.get('name').touched = true;, но это приведет к ошибке Cannot assign to 'touched' because it is a constant or a read-only property.
    Но в демонстрационной версии stackblitz вы можете увидеть, что она работает так, как мы также можно увидеть разницу с this.formGroup.get('name').touched = false;.

formGroup создается в демонстрационной форме следующим образом: 

 this.formGroup = this.formBuilder.group({
      'email': [null, [Validators.required, Validators.pattern(emailregex)]],
      'name': [null, Validators.required],
      'password': [null, [Validators.required, this.checkPassword]],
      'description': [null, [Validators.required]],
      'validate': ''
    });
0 голосов
/ 16 ноября 2018

Если вы хотите использовать реактивные формы ... используя ngAfterViewInit, вы можете программно пометить поле как прикосновенное, чтобы вызвать ошибку.

  • К сожалению, я не знаю, как это сделать через управляемые шаблоном формы. 

    setTimeout(() => {
        this.yourForm.controls['yourControl'].markAsTouched();
      }, 0);

1012 * Revision *

Основываясь на моем первоначальном ответе и расширении моего ответа Абхишека, чтобы подтвердить, что вы можете делать это с помощью реактивных форм ... Я хотел также предоставить сценарий формы на основе шаблонов.

  • Общая тема здесь, независимо от того, используете ли вы реактивные формы или формы на основе шаблонов, заключается в том, что вам необходимо программно пометить ввод как коснулся ...
  • В шаблонно-управляемых формах вам также нужно будет сделать то же самое с помощью ссылки на шаблон, так что вы можете вызвать метод markAsTouched () для элемента управления в Ваш крючок жизненного цикла ngOnInit.

Установите ссылку на шаблон для id и привяжите его к ngModel через #id="ngModel" на входе ... вам также нужно будет присвоить имя на входе id с помощью name="id" это требование привязки к ngModel. 

<code><mat-form-field color="accent">
    <input matInput placeholder="ID is required" required="true" [(ngModel)]="uniqueID" name="id" #id="ngModel">
</mat-form-field>

<div *ngIf="id.invalid && (id.dirty || id.touched)">
    <mat-error *ngIf="id.errors.required">
        ID is <strong>required</strong>
    </mat-error>
</div>

<pre>id.errors: {{id.errors | json}}

Здесь вам нужно будет использовать @ViewChild в вашем компоненте, чтобы получить ссылку на #id и вызвать markAsTouched() для элемента управления через ловушку жизненного цикла ngOnInit. 

import {Component, OnInit, ViewChild} from '@angular/core';

@ViewChild('id') _id : any

ngOnInit(){
  this._id.control.markAsTouched();
}
...