Как сделать formControl в угловой readonly
Я знаю, что могу сделать это в html как
<input type="text" formControlName="xyz" readonly />
как это сделать из JS-кода, а не html, т.е.
Как сделать formControl в угловой readonly
Я знаю, что могу сделать это в html как
<input type="text" formControlName="xyz" readonly />
как это сделать из JS-кода, а не html, т.е.
Если вы используете Reactive Forms, вы можете назначить его динамически, как в приведенном ниже примере кода (поле электронной почты)
this.registerForm = this.formBuilder.group({
first_name: ['', Validators.required],
last_name: ['', Validators.required],
email: new FormControl({value: null, disabled: true}, Validators.required),
password: ['', Validators.compose([Validators.required, Validators.email])],
confirm_password: ['', Validators.required],
});
Если вы хотите получить все значения, включая отключенные элементы управления, вы должны использовать:
this.registerForm.getRawValue();
Просмотреть комментарий метода к исходному коду
/**
* The aggregate value of the 'FormGroup', including any disabled controls.
*
* If you'd like to include all values regardless of disabled status, use this method.
* Otherwise, the 'value' property is the best way to get the value of the group.
*/
getRawValue(): any;
Наслаждайтесь кодированием!
Мы можем использовать любой атрибут html и связывать его в угловом режиме с помощью []
.
Таким образом, вы можете использовать привязку атрибутов для атрибута readonly
в этом элементе управления
например
<input type="text" formControlName="xyz" [readonly]="anyBooleanPropertyFromComponent"/>
На мой взгляд, нет смысла READONLY в реактивной форме (Angular 2+).
Мы используем атрибут READONLY, чтобы запретить пользователю вводить/выбирать элемент управления формы, но мы получаем значение из ввода.
Мы используем атрибут DISABLED, чтобы запретить пользователю вводить/выбирать элемент управления формы, и мы не получаем значения из входных данных.
Нам не нужен атрибут READONLY, чтобы запретить пользователю вводить/выбирать. Поскольку атрибута DISABLED достаточно, чтобы запретить пользователю вводить/выбирать, а также вы можете получить значение из отключенного поля ввода/выбора/флажка/радио.
Вы можете добавить отключенный атрибут в поле в зависимости от модели
При создании FormGroup
this.formGroupName = this.fb.group({
xyz: [{ value: '', disabled: true }, Validators.required]
});
Во время выполнения
this.formGroupName.get('xyz').disable({ onlySelf: true });
Получение значений из FormGroup (отредактировано)
Получить значения только из не отключенных полей
this.formGroupName.value;
Получить значения всех полей в FormGroup
this.formGroupName.getRawValue();
Так что здесь вам не нужен атрибут READONLY. Надеюсь, поможет.
Вы можете (должен) отключить элемент управления с помощью одного компонента, а не HTML.
this.form.get('controlName').disable();
Использование readonly
on tag генерирует предупреждение о проблемах безопасности.
AS за быстрый способ. Я нашел ниже решение, которое работает.
Элементы на основе formControl доступны только для чтения, когда отключено:
this._formBuilder.group({
some: new FormControl(
{ value: parseInt(this.myobject.subObject.stringMember), disabled: true },
Validators.required
),
Но это верно для IE и Chrome, но неверно для Firefox....
Популярный обходной путь - добавить специфичный для Firefox прозрачный <div> над входом и включить управление вводом при нажатии на прозрачный div:
CSS:
#wrapper {
position: relative;
&::after {
content: "%";
position: absolute;
right: 10px;
top: 10px;
}
}
#click {
width: 100%;
height: 35px;
position: absolute;
background: transparent;
}
HTML:
<label>
<span class="label">Name </span>
<div id="wrapper">
<div
*ngIf="isFirefox"
id="click"
(click)="enable('name')"
></div>-->
<input type="text" formControlName="name" readonly />
</div>
</label>
машинопись:
export class MyObjectComponent implements OnInit {
@Input() public group: FormGroup;
isFirefox = /Firefox\//i.test(window.navigator.userAgent);
constructor() {}
ngOnInit() {}
enable(name) {
this.group.get(name).enable();
}
}
Но это решение работает только с элементами <input>, но не с элементами <textarea>, ни с элементом <input>, если используется вложенный FormControl.
Реальное решение состоит в том, чтобы установить formcontrol как не отключенный:
this._formBuilder.group({some: new FormControl ({value: parseInt (this.myobject.subObject.stringMember), отключено: false}, Validators.required),
и, в то же время, установить или только для чтения:
<label>
<span class="label">SomeLabel</span>
<textarea
maxlength="500"
formControlName="some"
readonly
></textarea>
</label>
или введите:
<input type="text" formControlName="name" />