Как переместить условные проверки ошибок из NgIf в машинописный файл? - PullRequest
Новая
       34

Как переместить условные проверки ошибок из NgIf в машинописный файл?

2 голосов
/ 21 мая 2019

В моем приложении Angular мне нужно добавлять / удалять классы CSS в зависимости от того, был ли FormControl затронут, загрязнен, недействителен и т. Д.

Я использую директиву ngClass, чтобы сделатьthis: 

<div class="form-group has-required"
    [ngClass]="{'has-error':
        (conditionsForm.get('acceptTerms').touched || conditionsForm.get('acceptTerms').dirty)
         && conditionsForm.get('acceptTerms').errors}">
</div

Вот что у меня есть в моем Typescript в настоящее время: 

ngOnInit() {
    this.conditionsForm = this.fb.group({
        acceptTerms: new FormControl('', Validators.required),
        insuredType: new FormControl('', Validators.required),
        reportInjury: new FormControl('', Validators.required)
    });
}

Поскольку приведенное выше условие довольно длинное, я бы хотел переместить его в свой файл Typescript.

Есть ли конкретный способ сделать это?Я не уверен, как я могу это сделать.Может кто-нибудь сказать мне, какой должен быть мой подход?

Заранее большое спасибо!

Ответы [ 4 ]

1 голос
/ 21 мая 2019

Я хотел бы пойти с этим, который будет работать для всех formControls: 

public hasError(formControlName: string): boolean {
 if (this.user.get(formControlName).errors) {
  return true;
 }
 else {
  return false;
 }
}

HTML-код: 

<div [ngClass]="{'has-error': hasError('acceptTerms')}">
// Other HTML
</div>

Так что в случае других элементов управления формы вы можете легко использовать его как:

<div [ngClass]="{'has-error': hasError('another_formcontrol')}">
 //
</div>

Working_Demo

1 голос
/ 21 мая 2019

Вы можете попробовать другой маршрут: Angular OOTB назначает классы, такие как ng-dirty, ng-touched, ng-invalid, для формирования элементов управления, их можно стилизовать в таблице стилей компонента. 

input.ng-invalid.ng-dirty {
  // style definition here
}
1 голос
/ 21 мая 2019

Не думаю, что вам нужно проверять и грязный, и потроганный.Оформить заявку на реактивную форму документации - https://angular.io/guide/reactive-forms

<div class="form-group has-required"
    [ngClass]="{'has-error':  conditionsForm.acceptTerms.touched && conditionsForm.acceptTerms.errors}">
</div>
1 голос
/ 21 мая 2019

Вы можете просто обернуть это в функцию в вашем компоненте: 

public _hasErrorClass(): boolean {
  return (this.conditionsForm.get('acceptTerms').touched || this.conditionsForm.get('acceptTerms').dirty)
         && this.conditionsForm.get('acceptTerms').errors;
}

А затем используйте его в своем шаблоне: 

<div class="form-group has-required" [ngClass]="{'has-error': _hasErrorClass()}"></div>
...