Проверка Angular FormControl при необходимости - PullRequest
Новая
       27

Проверка Angular FormControl при необходимости

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

Есть ли способ проверить, требуется ли управление?

Проблема возникла, когда я реализовал выделенный компонент поля формы, который принимает FormControl и имеет не только input, но и ошибки проверки.Поскольку некоторые поля обязательны для заполнения, полезно сообщить пользователю, если это требуется по *.

. Есть ли способ проверить @Input() control: FormControl для Validators.required и отобразить звездочку?

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Мне нужно что-то более абстрактное, поэтому я немного адаптировал ответ @siddajmera, чтобы можно было использовать в любое поле .

В вашем файле .ts:

isRequiredField(field: string) {
    const form_field = this.testForm.get(field);
    if (!form_field.validator) {
        return false;
    }

    const validator = form_field.validator({} as AbstractControl);
    return (validator && validator.required);
}

Затем в файле шаблона: 

<div>
    <label>Some Field:<span *ngIf="isRequiredField('some_field')">*</span></label>
    <input [formControl]="form.controls['some_field']">
</div>
<div>
    <label>Some Field:<span *ngIf="isRequiredField('another_field')">*</span></label>
    <input [formControl]="form.controls['another_field']">
</div>
0 голосов
/ 30 ноября 2018

Вы можете сделать что-то вроде этого: 

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';

@Component({...})
export class AppComponent  {
  form: FormGroup = new FormGroup({
    control: new FormControl(null, Validators.required)
  });

  get validator() {
    const validator = this.form.get('control').validator({} as AbstractControl);
    console.log(validator);
    if (validator && validator.required) {
      return true;
    }
  }
}

А затем в вашем шаблоне: 

<form [formGroup]="form" (submit)="onSubmit()">
  Control: <span *ngIf="validator">*</span> <input type="text" formControlName="control">
  <button>Submit</button>
</form>

ПРИМЕЧАНИЕ: Просто получите контроль формыкак тип AbstractControl с использованием этого this.form.get('control').validator({} as AbstractControl);

Это вернет объект со списком валидаторов, которые присутствуют в вашем FormControl.Затем вы можете проверить наличие ключа required в Объекте.Если он существует и его значение равно true, то вы можете быть уверены, что Обязательный валидатор применяется к FormControl.

Вот Рабочий образец StackBlitz для вашей ссылки.

...