Angular 7 - директива вызова функции - PullRequest
Новая
       19

Angular 7 - директива вызова функции

0 голосов
/ 13 марта 2019

У меня есть две введенные даты - «дата начала» и «дата окончания» - у меня также есть две директивы, в которых я использую в качестве валидаторов - допустимое минимальное и максимально допустимое значение для каждого поля (так, чтобы начальная дата победилане позже даты окончания)Если, например, я изменю дату начала на более позднюю, чем дата окончания, валидатор предупредит, что она недействительна.когда я изменяю дату окончания на более позднюю дату от даты начала - это предупреждение не исчезнет, ​​так как я не запустил валидатор «customMax».Как я могу запускать оба валидатора одновременно при каждом изменении в одном из полей?

Спасибо,

вводит HTML: 

<input
type="text" class="form-control"
name="startDate{{d.index}}"
required
[customMax]="d.endDate"
(dateChange)="onDateChange('startDate', d.index, $event)"
[(ngModel)]="d.startDate"
appMyDatePicker>
<input type="text" class="form-control"
required
[customMin]="d.startDate"
name="endDate{{d.index}}"
(dateChange)="onDateChange('endDate', d.index, $event)"
[(ngModel)]="d.endDate"
appMyDatePicker>

customMax директива: 

@Directive({
selector: '[appCustomMaxValidator],[customMax][ngModel]',
providers: [{provide: NG_VALIDATORS, useExisting: 
CustomMaxValidatorDirective, multi: true}]
})
export class CustomMaxValidatorDirective implements Validator {

@Input()
customMax: Date;
constructor() { }

validate(c: FormControl): {[key: string]: any} {
const maxDateConvertInit = moment(this.customMax, 'DD/MM/YYYY HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
console.log('cant be greater than:' + maxDateConvertInit);
const maxDateConvertCompare = moment(c.value, 'DD/MM/YYYY HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
console.log('check date:' + maxDateConvertCompare);
const testScore = (maxDateConvertInit <= maxDateConvertCompare) ? {'customMax': true} : null;
return testScore;
}
}

Директива customMin: 

@Directive({
  selector: '[appCustomMinValidator],[customMin][ngModel]',
  providers: [{provide: NG_VALIDATORS, useExisting: CustomMinValidatorDirective, multi: true}]
})
export class CustomMinValidatorDirective implements Validator {

  @Input()
  customMin: Date;
  constructor() { }

  validate(c: FormControl): {[key: string]: any} {
    const minDateConvertInit = moment(this.customMin, 'DD/MM/YYYY HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
    const minDateConvertCompare = moment(c.value, 'DD/MM/YYYY HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
    const testScore = (minDateConvertInit >= minDateConvertCompare) ? {'customMin': true} : null;
    return testScore;
  }

}

1 Ответ

0 голосов
/ 13 марта 2019

ИМХО это должно обрабатываться вашим компонентом.Вы должны активировать markAsTouched:

https://angular.io/api/forms/AbstractControl#markAsTouched

на обоих элементах управления FormControls при изменении одного из них.Это должно заставить валидаторы пересчитать.В моих приложениях я использую следующий сервис: 

import {Injectable, ChangeDetectorRef} from '@angular/core';
import {FormControl, NgForm} from '@angular/forms';

@Injectable()
export class FormService {

 constructor() {}

 public handleInvalidControls(form: NgForm, changeDetector: ChangeDetectorRef) {
    this.markInvalidControlsAsTouched(form);
    changeDetector.detectChanges();
 }

 private markInvalidControlsAsTouched(form: NgForm) {
     for (const key in form.form.controls) {
        const control = form.form.controls[key];
        if (control instanceof FormControl && control.invalid) {
           control.markAsTouched();
        }
     }
  }
}

Чтобы получить доступ к вашей форме из вашего компонента, вам нужно использовать Angulars ViewChild decorator в вашем шаблоне: 

<form #submitForm="ngForm">

и в вашем компоненте: 

@Injectable()
export class FormComponent {

    @ViewChild('submitForm')
    submitForm;    
    ...
}
...