ОБНОВЛЕНИЕ 2 (работает)
Angular не предоставляет решения для получения валидаторов FormControl, что означает, что нам придется вернуться к довольно хакерским решениям
То, что они в основном делают в настоящее время, это циклически проходить через FormControls, выполнять валидаторы на пустом элементе управления
const validator = abstractControl.validator({}as AbstractControl);
if (validator && validator.required) {
return true;
}
и проверьте, есть ли на нем требуемый валидатор.
хотя технически это работает, он выполняет все синхронные валидаторы!
Затем вы можете, например, получить ссылку на nativeElements элементов управления формы и сравнить их по formControlName.
Я создал стек, чтобы проиллюстрировать это
https://stackblitz.com/edit/angular-hifypw?file=src%2Fapp%2Fapp.component.ts
требуемый FormControl будет отображаться с красным фоном.
Я использовал шаблон Переменная theForm, чтобы получить элемент, который содержит FormGroup, а затем выбрать каждого потомка типа input.
Затем я зацикливаюсь на них и проверяю, есть ли у них требуемый валидатор.
Для сравнения я использую форму ControlName
const controls = this.getValidators(this.frmMain.controls);
this.elements.forEach(x => {
x.nativeElement.querySelectorAll('input').forEach(i => {
const c = controls[i.attributes['formcontrolname'].value];
if(i.attributes['formcontrolname'] && c && c.required && !i.classList.contains('test')) {
i.classList.add('test');
}
});
})
Я думаю, что это много работы, для чего-то довольно простого.
Кроме того, мой подход в настоящее время будет работать только в том случае, если все элементы управления форм находятся в одном и том же компоненте (и, конечно, он включает только входные данные), и я понятия не имею, будет ли он работать с AOT.
Это работает, но я бы предпочел использовать пользовательскую директиву или просто простой класс CSS.
UPDATE
на данный момент единственное решение, я придумываю создать класс .required и добавить его вручную.
Может быть, вы могли бы использовать комбинацию @ViewChildren и FormControl, чтобы получить то, что вы хотите. Я буду исследовать, но это, вероятно, будет немного хакерским.
НИЖЕ РАБОТАЕТ ТОЛЬКО ДЛЯ ШАБЛОННЫХ ДВИЖУЩИХСЯ ФОРМ
Вы можете использовать input[type=text][required] и т. Д.
Хотя это в принципе сработало бы, я думаю, что это очень широкий селектор, который, вероятно, приведет к последним проблемам в вашем проекте, и вы будете писать некрасивые правила CSS, чтобы обойти это правило.
Я хотел бы создать класс css для обозначения элемента управления формой, как это делает платформа начальной загрузки.
Что-то вроде .form-control[required].
Имейте в виду, что стилизация переключателей и флажков работает совершенно иначе, чем текстовые поля и поля выбора.
Например, вы не можете установить границы для <input type="checkbox" /> и <input type="radio" />
Так что вы можете быть даже более конкретным (и все же не слишком конкретным)
.form-control[type="text"][required]
или другое решение, просто создайте класс CSS .required и отделитесь от угловых.