Правильный способ отключить поля ввода в Angular 5

Question

У меня есть FormGroup, который был создан следующим образом:

form: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

this.form = this._formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required, Validators.email]
});

Когда происходит событие, я хочу отключить эти поля ввода, поэтому в HTML я добавил:

<input class="form-control" placeholder="Name" name="name" formControlName="name" [(ngModel)]="name" autocomplete="off" [disabled]="isDisabled" required>

<input class="form-control" placeholder="Email" name="email" formControlName="email" [(ngModel)]="email" email="true" autocomplete="off" [disabled]="isDisabled" required>

Где isDisabled — это переменная, которую я переключаю на true, когда происходит указанное событие.

Как вы можете представить, я получаю следующую ошибку:

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

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

Таким образом, согласно приведенному примеру и после небольшого поиска, я узнал, что должен объявить свои контролы следующим образом:

name: [{ value: '', disabled: this.isDisabled }, Validators.required]

Проблема в том, что: он не переключается между состояниями отключено/включено, когда переменная меняется между true и false.

Какой правильный способ сделать так, чтобы переменная контролировала, включен или отключен ввод?

Я не хочу делать это вручную (например, this.form.controls['name'].disable()), потому что это не кажется очень реактивным способом, и мне пришлось бы вызывать это внутри множества методов. Вероятно, это не самая лучшая практика.

Спасибо!

Answer 1

Вы можете изменить присваивание переменной на метод-сеттер, чтобы получить следующий код:

set isDisabled(value: boolean) {
    this._isDisabled = value;
    if (value) {
        this.form.controls['name'].disable();
    } else {
        this.form.controls['name'].enable();
    }
}

Таким образом, при изменении значения переменной isDisabled автоматически будет выполняться включение или отключение управления формой 'name'.

Answer 2

Для ввода используйте [readonly], а не [disabled], и все будет работать.

Answer 3

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

this.form.get('name').disable();

Это обеспечит правильное состояние и управление формой.

Answer 4

Чтобы отключить текстовое поле (TextBox) в Angular 7, вы можете воспользоваться атрибутом [disabled]. В вашем примере код выглядит правильно, вы уже применили [disabled]="true" к элементу <input>, что делает его неактивным. Однако, если вы хотите изменить состояние этого поля динамически в зависимости от определённых условий, вы можете использовать привязку к переменной компонента.

Вот пример, как это можно сделать:

Шаги:

В вашем компоненте (TypeScript файл), создайте переменную, которая будет контролировать состояние вашего текстового поля.

export class YourComponent {
  email: string = '';
  isDisabled: boolean = true; // измените на false, если хотите, чтобы поле было активным
}

В HTML-шаблоне используйте эту переменную:

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;">
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="isDisabled" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

Дополнительные советы:

Если вам нужно будет программно изменять состояние текстового поля, просто обновите переменную isDisabled. Например, вы можете установить её на false в результате какого-либо события.

enableEmailField() {
  this.isDisabled = false; // активируем текстовое поле
}

Таким образом, вы имеете полный контроль над состоянием вашего текстового поля в зависимости от логики вашего приложения.

Answer 5

Вы можете использовать следующий код в вашем TypeScript файле для управления состоянием формы.

Чтобы отключить или включить всю форму, используйте:

this.form.disable()
this.form.enable()

Для управления состоянием отдельных элементов управления (контролов) формы, вы можете делать следующее:

this.form.get('first').disable()
this.form.get('first').enable()

Кроме того, вы можете установить начальное состояние элемента управления (например, сделать его отключенным) следующим образом:

first: new FormControl({value: '', disabled: true}, Validators.required)

Это позволит вам управлять состоянием вашей формы и ее контролов в зависимости от ваших потребностей.

Правильный способ отключить поля ввода в Angular 5

5 ответ(ов)

Шаги:

Дополнительные советы:

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных