Отключить ввод текста в реактивной форме angular 2
У меня есть реактивная форма в angular 2, которую можно вызвать с помощью кнопки добавления для новой формы или кнопки редактирования для обновления существующих данных. Если пользователь нажимает кнопку редактирования, ввод электронной почты должен быть отключен. У меня есть код ниже, но всякий раз, когда пользователь выбирает редактирование, ввод не отключается. Если я установил для параметра disabled значение true в методе addForm и нажал кнопку редактирования, то ввод электронной почты отключен.
public addForm(event: string) : FormGroup {
this.userForm = this.fb.group({
firstName: ['',
[ Validators.required,
Validators.maxLength(ManageUsersConstants.maxLengthName)
]],
lastName: ['',
[ Validators.required,
Validators.maxLength(ManageUsersConstants.maxLengthName)]
],
email: [{value: '', disabled : false}],
}),
});
}
public editForm(event: string, editValues : any) : FormGroup {
this.userForm = this.fb.group({
firstName: [editValues.firstName, [
Validators.required,
Validators.maxLength(ManageUsersConstants.maxLengthName)]],
lastName: [editValues.lastName,
[ Validators.required,
Validators.maxLength(ManageUsersConstants.maxLengthName)]],
email: [{value: editValues.email, disabled: true}],
});
}извините, как вы имеете в виду прямую нацеливание на ввод? HTML?
Я имею в виду таргетинг на электронную почту от FormGroup (например, бит кода из моего последнего комментария)
Я пробовал это, а также установил / патч, но все еще кажется, что он установлен на false
Ответы 1
В событии редактирования добавьте следующий код this.formGroup.controls['email'].disable() ;
Component.ts
ngOnInit() {
this.formGroup = this.formBuilder.group({
email: [{value: '', disabled : false}]
});
}
onEdit(){
this.formGroup.controls['email'].disable()
}
HTML
<form [formGroup] = "formGroup" (ngSubmit) = "onSubmit()" #form>
<div>
<label for = "dateone">Email: </label>
<input formControlName = "email" #email/>
<button type = "button" (click) = "onEdit()">edit</button>
</div>
</form>
Быстрый вопрос, я добавил эту строку кода в редактирование, и она работает, но всякий раз, когда я снова нажимаю на кнопку «Добавить», ввод отключается. Я добавил эту строку кода в - this.userForm.controls ['email']. Enable (); - после того, как форма создана, но по-прежнему отключена. Я получаю undefined, если добавляю его до создания формы
Он заработал, просто добавил проверку, чтобы убедиться, что он не является неопределенным, и переместил его до создания формы
Похоже, вы просто переназначаете форму. Почему бы напрямую не нацелить ввод и вместо этого изменить его?
this.userForm.get('email').disable();(думаю, чуть-чуть не трогал ?)