Simple Angular2 Reactive Form control enable change change

Question

У меня есть форму с first_name и last_name.

Если оба этих поля имеют введенное значение, я хочу, чтобы включил другой formControl в том же виде.

Я знаю, что могу подписаться на изменения, как это:

createForm() { 
    this.myForm = new FormGroup({ 
     first_name: this.first_name, 
     last_name: this.last_name, 
     email: this.email, 
     mobile: this.mobile, 
     salutation: this.salutation 
    }); 
    this.myForm.valueChanges.subscribe(data => console.log('form changes', (!data.first_name == !data.last_name))); 
    } 

, который входит в консоль и показывает «истина», когда оба значения установлены.

Вы можете видеть из this thread на угловом github, что мы не можем/не должны устанавливать это свойство и связывать [disabled]=<booleanProperty> (и основная команда, похоже, все еще работает над этой проблемой).

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

В OnInit она отключена в соответствии с гидами:

this.salutation = new FormControl({value:'', disabled: true}, Validators.required); 

UPDATE

К сожалению, я забыл упомянуть, что я уже попробовал это, в OnInit:

this.myForm.valueChanges.subscribe(data => { 
    if (!data.first_name == !data.last_name) { 
    this.salutation.enable(); 
    }; 
}) 

Это не работает, это вызывает ошибку консоли: Maximum call stack size exceeded

Answer 1

Размер стека превышено был ключ к решению этого. Поскольку поток является «непрерывным», мой код постоянно включал управление, но, разумеется, его нужно активировать только один раз.

Поэтому добавление проверка решить эту проблему, и теперь он работает:

this.myForm.valueChanges.subscribe(data => { 
    if (!data.first_name == !data.last_name && this.myForm.controls['salutation'].disabled) { 
    this.myForm.controls['salutation'].enable(); 
    }; 
}) 

дальнейшей информации here

Answer 2

В функции подписываться, сделать что-то вроде

this.myForm.controls["controlToEnable"].enable();