Как в angular проверить FormControl на валидность из функции?

Question

[Адель Халитов]

Есть такая группа:

this.OfferControl = this.fb.group({
      leadLink: this.LeadControl.get('leadId').value,
      area: ['', Validators.required],
      regular: ['', Validators.required],
      time: '',
      details: this.fb.group({
        fot: ['', Validators.required],
        managerWage: ['', Validators.required],
        tinkoffCommission: ['', Validators.required],
        windowFond: ['', Validators.required],
        material: ['', Validators.required],
        profit: ['', Validators.required],
        itog: ['', Validators.required],
        itogMaterial: ['', Validators.required],
      })
    });

Мне нужно при нажатии на кнопку, которая хранится вне формы:

<form [formGroup]="OfferControl">
......
</form>

<button (click)="some()">Действия</button>

Запустить функцию some() и сделать валидацию этой группы, то есть, если есть ошибка, то выделить красным то, где пусто (Как в моем примере).

if (this.OfferControl.valid) {
...
}

Такой вариант просто проверяет, если все ок выполняет дальнейшие действия, но не выделяет незаполненные поля.

Answer 1

[Антон Швец]

valid и hasError есть не только у всей группы, но и у каждого поля.
Чтобы выделить поле красным - создаешь условный аттрибут класса по valid этого поля.
например для area
[class.error]="!OfferControl.get('area').valid"
и тогда элемент получит класс error когда станет невалиден.
А еще там стандартные классы вешаются, откройте форму в девтулзах и посмотрите как она меняется.

Comments

[Адель Халитов]

<input matInput type="text" formControlName="firmName" [class.error]="!LeadControl.get('firmName').valid"  placeholder="Название фирмы">

validator() {
    if (this.LeadControl.valid) {
      console.log('Проверил');
    }
  }

К сожалению не выделяет ошибку, или я что то не правильно понял?

[Антон Швец]

Адель Халитов, конечно не правильно.
Проверку нужно делать в шаблоне html. Шаблон пересчитывается при каждом измерении.
Если вы хотите проверять в скрипте нужно подписыватся на обновление данных формы.

[Адель Халитов]

Антон,
Я подписан на формгруппы

this.LeadControl.valueChanges
      .subscribe(
        (value) => console.log(value)
      );

    this.OfferControl.valueChanges
      .subscribe(
        (value) => console.log(value)
      );

[Антон Швец]

Адель Халитов, ангуляр слишком заморочен, чтобы была возможность быстро и исчерпывающе ответить в комменте.
Кидайте ваше проблему на stackblitz, будет гораздо проще понять и поправить