Угловая 2 Проверка перекрестного поля (на основе модели) addErrors?

Question

Я реализую перекрестную проверку поля для двух полей в форме (реактивный/модель на основе подхода) и не знаю, как я должен добавить ошибку в существующий список погрешности FormControl

Форма:

this.myForm = new FormGroup({ 
    name: new FormControl('', Validators.minLength(3)); 
    city: new FormGroup({ 
    cityOne: new FormControl('', Validators.minLength(3)), 
    cityTwo: new FormControl('', Validators.minLength(3)) 
    }, this.validateEqualCities) 
}); 

Validator:

validateEqualCities(formGroup: FormGroup) { 
    return (control: AbstractControl): { [key: string]: any } => { 
    if (formGroup.controls['cityOne'].value && formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) { 

    formGroup.controls['cityOne'].setErrors({ 'equalCities': true }, { emitEvent: true }); 
    formGroup.controls['cityTwo'].setErrors({ 'equalCities': true }, { emitEvent: true }); 

     return { 'equalCities': false }; 

    } else { 
     formGroup.controls['cityOne'].updateValueAndValidity({ onlySelf: true, emitEvent: false }); 
     formGroup.controls['cityTwo'].updateValueAndValidity({ onlySelf: true, emitEvent: false }); 
    } 

    return null; 
    }; 
    } 

Моей проблема: Если проверка не пройдена «setErrors (..)» отменяет все ошибки, которые уже есть (валидаторы из formControls), так что нет никакого правильного состояния, потому что на самом деле должно быть 2 ошибки.

Если я не устанавливаю ошибки для непосредственного формирования элементов управления и возвращает ошибку в форму, только форма является недопустимой и получает ошибку, но не ее элементы управления.

Как я могу достичь того, что и форма, и элементы управления имеют реальное состояние проверки?

спасибо!

Answer 1

Вы можете захватить объект ошибок, как есть, прежде чем назначать ошибки, изменять их и записывать весь объект обратно.

validateEqualCities(formGroup: FormGroup) { 
    return (control: AbstractControl): { [key: string]: any } => { 
    if (formGroup.controls['cityOne'].value && formGroup.controls['cityTwo'].value && formGroup.controls['cityOne'].value !== formGroup.controls['cityTwo'].value) { 
     let errors = formGroup.controls['cityOne'].errors ? formGroup.controls['cityOne'].errors : {}; 
     errors['equalCities'] = false; 
     formGroup.controls['cityOne'].setErrors(errors, { emitEvent: true }); 

     errors = formGroup.controls['cityTwo'].errors ? formGroup.controls['cityTwo'].errors : {}; 
     errors['equalCities'] = false; 

     formGroup.controls['cityTwo'].setErrors(errors, { emitEvent: true }); 

     return { 'equalCities': false }; 
    <...> 

Вот Plunker с рабочим демы: http://plnkr.co/edit/XTeH1ifQTJSoMvBEvE0d?p=preview