kątowa 2: Wyłącz zmianę sygnału wejściowego nie działa

Question

Aż do „final” 2,0 kątowego Zrobiłem to:

<input type="text" formControlName="name" [disabled]="!showName"> 

Aby dynamicznie włączyć/wyłączyć wejść formularza.

Po uaktualnieniu z RC7 do 2,0 ja dostać to ostrzeżenie w oknie konsoli:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

ja zmieniłem kod do tych instrukcji jak to:

this._userGroupUsersForm = this._formBuilder.group({ 
     'users': [{'', disabled: this.showName}, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50), Validators.pattern("^[a-zA-ZåäöÅÄÖ 0-9_-]+$")])] 
    }); 

i że działa dobrze dla początkowe ładowanie strony, ale nie mogę już zmieniać stanu w następujący sposób:

toggleName() : void { this.showName = !this.showName; } 

Jak rozwiązać ten problem?

Uwaga: Mój "stary" sposób robienia tego (przez ustawienie [wyłączone]) również nie działa.

Answer 1

To powinno działać

toggleName() : void { 
    let ctrl = this.form.get('name') 
    ctrl.enabled ? ctrl.disable() : ctrl.enable() 
} 

Answer 2

As z RC6 trzeba wywołać funkcję RC6 Forms: disabled attribute cannot be set dynamically anymore wyłączyć().

Answer 3

Ten sam problem spowodował, że wyciągnąłem włosy. Moim rozwiązaniem było użycie interpolacji zamiast jednokierunkowej do aktualizacji właściwości. W twoim przypadku, zamiast użycia:

<input type="text" formControlName="name" [disabled]="!showName">

można zrobić:

<input type="text" formControlName="name" disabled="{{!showName}}">

Tak szybko, jak to zrobiłem, byłem w stanie dynamicznie włączyć/wyłączyć elementy w moich postaciach.

Mam nadzieję, że to pomoże!

Answer 4

Możesz spróbować użyć atrybutu readonly w swoich danych wejściowych.

niepełnosprawnych >>> readonly

<input type="text" formControlName="name" [readonly]="!showName">

Answer 5

Jeśli ktoś przewija się przez to i przyjął odpowiedź (Gunters) nie działa, ponieważ nie zrobił dla mnie na początku. Możliwe, że próbujesz użyć go z komponentem niestandardowym i nie wdrożyłeś opcjonalnej metody setDisabledState(isDisabled: boolean) z interfejsu ControlValueAccessor.