Ионная 4 / Угловая ошибка удаления из другого поля - PullRequest
Новая
       13

Ионная 4 / Угловая ошибка удаления из другого поля

0 голосов
/ 16 октября 2019

У меня есть два поля даты в форме dateFrom и dateTo. Каждое поле имеет проверку, где dateFrom не может быть позже, чем dateTo, а dateTo не может быть раньше, чем dateFrom.

. Вот код: 

this.detailsForm = formBuilder.group({
    dateFrom: ['', Validators.compose([Validators.required])],
    dateTo: ['', Validators.compose([Validators.required])]
},
{
    validator: Validators.compose([this.validatesFromDate, this.validatesToDate])
});

validatesFromDate(c: AbstractControl) {
    if(!c.get('dateFrom').value || !c.get('dateTo').value )
    {
        return null;
    } 
    else
    {
        if(new Date(c.get('dateFrom').value) > new Date(c.get('dateTo').value))
        {
            c.get('dateFrom').setErrors({ valid: false});
            return;
        }
    }
}

validatesToDate(c: AbstractControl) {
    if(!c.get('dateFrom').value || !c.get('dateTo').value )
    {
        return null;
    } 
    else
    {
        if(new Date(c.get('dateTo').value) < new Date(c.get('dateFrom').value))
        {
            c.get('dateTo').setErrors({ valid: false});
            return;
        }
    }
}

Допустим, этидаты по умолчанию:

dateFrom = 16/10/2019

dateTo = 17/10/2019

Если бы я изменил dateFrom на 18/10 /2019, это позже, чем dateTo, и он должен установить ошибку, которую он делает. Поле get установлено недействительным по углу, и у меня есть сообщение об ошибке, которое появляется под dateFrom, и dateTo по существу имеет то же самое. 

<ion-row *ngIf="!detailsForm.controls.dateFrom.valid">
    <ion-col>
        <ion-text class="error" color="danger">
            This date cannot be later than the other.
        </ion-text>
    </ion-col>
</ion-row>

<ion-row *ngIf="!detailsForm.controls.dateTo.valid">
    <ion-col>
        <ion-text class="error" color="danger">
            This date cannot be earlier than the other.
        </ion-text>
    </ion-col>
</ion-row>

Если я затем изменю dateTo на 20/10 /2019, который теперь более поздний, чем dateFrom, в идеале он должен удалить ошибку в поле dateFrom, но это не так.

Я попытался установить это в начале каждой функции проверки: 

c.get('dateFrom').setErrors({ valid : true });
c.get('dateTo').setErrors({ valid : true });

То же самое для поля dateTo, так что оно сначала сбрасывает проверку перед установкой ошибки снова, если она не проверяется, но, похоже, не удаляет ошибку. Сообщение об ошибке все еще там, и поле все еще недействительно.

Я что-то упустил или я что-то не так делаю?

1 Ответ

0 голосов
/ 16 октября 2019

Моя идея - уникальная ошибка в dateTo: 

<!--see that the error ask about detailsForm.valid 
       not about controls.dateTo.valid-->
<ion-row *ngIf="!detailsForm.valid"> 
    <ion-col>
        <ion-text class="error" color="danger">
            This date cannot be earlier than the other.
        </ion-text>
    </ion-col>
</ion-row>
...