Angular2 RC6 отключенный вход

Ранее в моем приложении Angular2 RC5 у меня был элемент ввода, например:

<input type="text" formControlName="blah" disabled/>

Цель заключалась в том, чтобы сделать это поле недоступным для редактирования пользователем в режиме редактирования; следовательно, отключенный атрибут.

После обновления до Angular2 RC6 я получаю следующее сообщение в консоли:

Похоже, вы используете атрибут disabled с директивой реактивной формы. Если вы установите для параметра disabled значение true при настройке этого элемента управления в своем классе компонентов, атрибут disabled будет фактически установлен в DOM для вас. Мы рекомендуем использовать этот подход, чтобы избежать ошибок "после проверки".

Пример:

form = new FormGroup({
   first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
   last: new FormControl('Drew', Validators.required)
});

Однако, если я последую этому совету, удалив мой отключенный атрибут и заменив мой FormControl на отключенный набор на true, то это поле не отправляет сообщение при отправке (т.е. оно не отображается в form.value).

Я неправильно закодировал эту ситуацию? Есть ли способ для FormControl, который отключен для включения в значения форм?

В качестве побочного примечания я фактически использую FormBuilder против создания каждого отдельного FormControl, если это имеет значение.

Ответы

Ответ 1

Правильный ответ на Angular 2.4.1 и использование FormBuilder как вы

form: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit() {
    this.form = this.fb.group({
      blah: [{ value: '', disabled: true }]
});

и вы можете включить его, позвонив

this.form.get("blah").enable();

или выключить, вызывая

this.form.get("blah").disable();

Однако браузеру не разрешается отправлять элементы, которые отключены. Этот популярный вопрос содержит дополнительную информацию о том, что значения отключенных входов не будут отправлены?

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

Ответ 2

Вместо отключенного атрибута в шаблоне вы можете установить "отключенный" экземпляр FormControl на "true".

blah: FormControl = new FormControl({value: 'text', disabled: true});

или

blah: FormControl = new FormControl('text');
blah.disabled = true;

Ответ 3

Вы можете попробовать использовать атрибут readonly на вашем входе: <input type="text" [readonly]="true" />

Ответ 4

Вам нужно использовать getRawValue()

см.: Отключено подтверждение ввода в динамической форме

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#getRawValue-anchor

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

Ответ 5

Я в порядке с этим кодом. Если вы хотите отключить this.userForm.controls['UserID'].disable({ onlySelf: true }); если вы хотите включить       this.userForm.controls['UserID'].enable({ onlySelf: false });

Ответ 6

Вот трюк: this.form.getRawValue();, не нужно менять свою модель.

В вашем компоненте получите значение с помощью функции getRawValue, и оно также вернет значения для отключенных элементов управления.

Вот мой метод сохранения для проверки:

save() {       
    let data = this.form.getRawValue();
    if (!this.form.valid)
        return;
    ...................
    ...................
}

Дополнительные сведения см. в двух последних параграфах на странице

Ответ 7

Вы можете сделать это так:

В шаблоне:

<[disabled]="state"/>

В компоненте:

 state:any = true;