All files / src/app/shared/forms/directives show-form-feedback.directive.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
3x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
14x
 
 
 
 
 
 
 
14x
14x
 
 
 
 
 
 
 
 
 
14x
14x
 
 
 
 
 
 
import { Directive, HostBinding, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
 
/**
 * an attribute directive that adds CSS classes to a dirty host element(s) related to the validity of a FormControl or a group of FormControls
 *
 * @example
 * <div class="form-group has-feedback" [formGroup]="form" [ishShowFormFeedback]="formControl">
 *               <input
 *                 [type]="type"
 *                 class="form-control"
 *                 [formControlName]="controlName">
 * </div>
 *
 * <div class="form-group has-feedback" [formGroup]="form" [ishShowFormFeedback]="[formControl, formControl2]">
 *               <input
 *                 [type]="type"
 *                 class="form-control"
 *                 [formControlName]="controlName">
 *
 *                <input
 *                 [type]="type"
 *                 class="form-control2"
 *                 [formControlName]="controlName2">
 * </div>
 */
@Directive({
  selector: '[ishShowFormFeedback]',
})
export class ShowFormFeedbackDirective {
  /**
   * FormControl which validation status is considered
   */
  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('ishShowFormFeedback') control: AbstractControl | AbstractControl[];
 
  /**
   *  If form control is invalid and dirty 'has-error' class is added
   */
  @HostBinding('class.has-error')
  get hasErrors() {
    return this.determineErrors();
  }
 
  /**
   *  If form control is valid and dirty 'has-success' class is added
   */
  @HostBinding('class.has-success')
  get hasSuccess() {
    if (this.control instanceof AbstractControl) {
      return this.control.validator && this.control.valid && this.control.dirty;
    } else IEif (Array.isArray(this.control)) {
      Iif (this.determineErrors()) {
        return false;
      }
      return this.control.every(control => control.validator && control.valid && control.dirty);
    }
  }
 
  private determineErrors(): boolean {
    if (this.control instanceof AbstractControl) {
      return this.control.validator && this.control.invalid && this.control.dirty;
    } else IEif (Array.isArray(this.control)) {
      return this.control.some(control => control.validator && control.invalid && control.dirty);
    }
  }
}