У меня есть ввод, который будет заполнен, когда пользователь нажмет на диалоговое окно. Поэтому для этого мне пришлось сделать его отключенным, потому что я не хочу, чтобы пользователь вводил значение вручную. Единственная проблема в том, что этот ввод должен быть обязательным, и я не мог сделать это до сих пор.
Я попытался добавить директиву «required» во ввод, а также попытался добавить Validator.required при создании формы, но ни один из них не сделал поле обязательным для формы.
createUnityForm(): FormGroup {
return this._formBuilder.group({
id : [this.unity.id],
description: [this.unity.description],
floor: [{value: this.unity.floor, disabled: true}, Validators.required]
});
}
<mat-form-field appearance = "outline" floatLabel = "always" class = "mr-16" fxFlex>
<mat-label>{{'UNITY.FLOOR' | translate}}</mat-label>
<input matInput placeholder = "{{'UNITY.SELECT-FLOOR' | translate}}"
name = "floor"
formControlName = "floor"
required>
</mat-form-field>
<button *ngIf = "action === 'edit'"
mat-button
class = "save-button"
(click) = "matDialogRef.close(['save',unityForm])"
[disabled] = "unityForm.invalid"
aria-label = "save">
{{'GENERAL.SAVE' | translate}}
</button>
unityForm действителен, даже если на входе ничего нет
Возможно, this.unity.floor
содержит значение в начале. Если он имеет значение, то проверка может пройти
Это не так.. пробовал также с floor: [{value: null, disabled: true}, Validators.required], но проблема остается.
Если вы установите FormControl
на disabled
, его валидаторы будут игнорироваться.
Дополнительная информация: https://angular.io/api/forms/AbstractControl#disabled
Это неправильно, вы не можете динамически устанавливать formControl, используя свойство disabled, оно доступно только для чтения! Вы, вероятно, захотите использовать правила проверки, а затем использовать свойство только для чтения, чтобы отключить его stackoverflow.com/questions/54533202/…
Попробуйте readonly
вместо disabled
.
У Радослава он есть. Попробуйте в HTML только для чтения вместо отключенного в модели. Это обеспечивает аналогичный пользовательский интерфейс для отключения элемента управления в модели, но проверка остается активной. Это может быть полезно (например, извлекать записи из других источников для фиксации в другой базе данных, не допуская каких-либо пользовательских изменений, а фиксируя только в том случае, если исходные данные действительны)
Вы не можете, реактивные формы не используют валидаторы для отключенных полей. Я думаю, что это хороший способ сделать так:
-HTML
<input
type = "text"
formControlName = "controlName"
[ngClass] = "{ 'is-invalid':
(c.controlName.errors || c.controlName.disabled)
&& submited }"/>
-Машинопись
submited = false;
form: FormGroup = this.formBuilder.group({
controlName: [{ value: '', disabled: true }, Validators.required]
});
get c(): { [key: string]: AbstractControl } {
return this.form.controls;
}
save(): void {
this.submited = true;
if (this.form.invalid
|| this.formControl.controlname.value === '') {
return;
}
-CSS
.is-invalid {
border: 1px solid #dc3545;
}
Когда вы нажимаете кнопку СОХРАНИТЬ, обязательное поле получает красную рамку, если нет значения
Когда я пытаюсь добавить [disabled] = true во ввод, angular показывает в консоли: Похоже, вы используете отключенный атрибут с директивой реактивной формы. Если вы установите для параметра disabled значение true при настройке этого элемента управления в своем классе компонентов, атрибут disabled будет фактически установлен в DOM для вас. Мы рекомендуем использовать этот подход, чтобы избежать ошибок «изменено после проверки». Пример: form = new FormGroup({ first: new FormControl({value: 'Нэнси', disabled: true}, Validators.required), }); Это именно то, что я закодировал. Не работает