Я уже пытался последовать примеру других ответов я тут и не получится!
Я создал реактивную форму (т. е. динамический) и я хочу, чтобы отключить некоторые поля в любой момент времени. Мой код:
this.form = this._fb.group({
name: ['', Validators.required],
options: this._fb.array([])
});
const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
value: ['']
}));
мой HTML-код:
<div class='row' formArrayName="options">
<div *ngFor="let opt of form.controls.options.controls; let i=index">
<div [formGroupName]="i">
<select formArrayName="value">
<option></option>
<option>{{ opt.controls.value }}</option>
</select>
</div>
</div>
</div>
Я сократил код, чтобы облегчить. Я хочу, чтобы отключить поле типа Select. Я пытался сделать следующее:
form = new FormGroup({
first: new FormControl({value: '', disabled: true}, Validators.required),
});
не работает! У кого-нибудь есть предложения?
name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],
или
this.form.controls['name'].disable();
Обратите внимание
Если вы создаете форму с помощью переменной состояния и пытается изменить его, он не будет работать, т. е. не изменится.
Например
this.isDisabled = true;
this.cardForm = this.fb.group({
'number': [{value: null, disabled: this.isDisabled},
});
и если вы измените переменную
this.isDisabled = false;
форма не изменится. Вы должны использовать
это.cardForm.вам('количество').отключить();
Кстати.
Вы должны использовать метод patchValue для изменения значения:
this.cardForm.patchValue({
'number': '1703'
});
Это плохая практика, чтобы использовать отключить в дом с реактивной формы. Вы можете установить этот параметр в FormControl, когда вы инициализировать с
username: new FormControl(
{
value: this.modelUser.Email,
disabled: true
},
[
Validators.required,
Validators.minLength(3),
Validators.maxLength(99)
]
);
Свойство "значение" не надо
Или вы можете получить свой элемент управления формы с GET('имя_элемента_управления')
и отключить
this.userForm.get('username').disable();
Более общий подход будет.
// Variable/Flag declare
public formDisabled = false;
// Form init
this.form = new FormGroup({
name: new FormControl({value: '', disabled: this.formDisabled},
Validators.required),
});
// Enable/disable form control
public toggleFormState() {
this.formDisabled = !this.formDisabled;
const state = this.formDisabled ? 'disable' : 'enable';
Object.keys(this.form.controls).forEach((controlName) => {
this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
});
}
Этот работал для меня:
этот.форма.вам('и#39;).отключить({onlySelf: правда});
Если использовать "отключено" форма ввода элементов (как предложили в правильный ответ как отключить ввод) проверки для них также будет отключен, обратите внимание на это!
(И если вы используете на кнопку Отправить как [отключен]=и"!форма.действует"
в его исключат от проверки)
Я решил, накрутка мой ввод объекта с меткой в поле: В полей должны иметь свойство disabled, привязанные к логическим
<fieldset [disabled]="isAnonymous">
<label class="control-label" for="firstName">FirstName</label>
<input class="form-control" id="firstName" type="text" formControlName="firstName" />
</fieldset>
У меня была такая же проблема, но вызов этот.форма.контроль['имя'].отключить() не исправлено это, потому что я был перегруз на мой взгляд (через маршрутизатор.перейдите()).
В моем случае мне пришлось сбросить свою форму до перезарядки:
это.форма = неопределено; это.маршрутизатор.перейти([путь]);
Самое лучшее решение-это здесь:
План решения (в случае если битая ссылка):
(1) Создать директиву
import { NgControl } from '@angular/forms';
@Directive({selector: '[disableControl]'})
export class DisableControlDirective {
@Input() set disableControl( condition : boolean ) {
const action = condition ? 'disable' : 'enable';
this.ngControl.control[action]();
}
constructor( private ngControl : NgControl ) {}
}
(2) использовать его как так
<input [formControl]="formControl" [disableControl]="condition">
(3) после входа инвалидов не показывают в форме.значение представить вам может понадобиться использовать следующие (Если требуется):
onSubmit(form) {
const formValue = form.getRawValue() // gets form.value including disabled controls
console.log(formValue)
}
Вы можете использовать это.форма.контроль['имя'].отключить();`
в <входной класс="по форме-контроль" имя=на"имя" и formControlName=то"имя" и [привлекательными.отключен]=на"истинный" и>
export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}
Включить всю форму
этот.имя_формы.включить();
*Разрешить конкретное поле в одиночку**
этот.имя_формы.контроля.имя.включить();
в <предварительно>В этом для отключения, заменить включить() и отключить().</пре>
Это прекрасно работает. Комментарий для запросов.