Отключить 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 с реактивной формой директивы. Если вы установили отключено на true когда вы устанавливаете этот элемент управления в своем классе компонентов, атрибут disabled будет фактически установлен в DOM для вы. Мы рекомендуем использовать этот подход, чтобы избежать ошибок «изменено после проверки».

  Example: 
  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()), потому что это не кажется очень реактивным способом, я должен был бы вызвать его внутри большого количества методов. Вероятно, не очень хорошая практика.

Thx

Answer 1

У меня есть функция, которая позволяет контролировать при нажатии.

  controlClick(control: any) {
      this.form.controls[control.ngControl.name].enable();
  }

Первоначально я использовал

  control.disabled = false;

Но это не сработало для элементов управления с <input>, например, в моем mat-chip-list.

Я использую FormGroup и отключаю каждый элемент управления в конструкторе

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<EditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) data
  ) {
    this.data = data;
    this.multiEdit = data.multiSelect;

    this.form = new FormGroup({
      autoArchive: new FormControl({
        value:
          this.getPreFill(data.selectedPolicy.autoArchive, this.multiEdit),
        disabled: true
        /*, Validators.required*/
      }),

...

  <mat-form-field (click)="controlClick(retrieveChipList)">
      <mat-chip-list #retrieveChipList formControlName="retrieveChipList">
        <mat-chip
        *ngFor="let email of data.selectedPolicy.retrieveEmailsToBeNotified" 
          (removed)="remove(email)" [selectable]="selectable"
          [removable]="removable" 
        >
          {{ email }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
        <input
        placeholder="Retrieve Emails to be Notified" 
        formControlName="retrieveChipList"
          [matChipInputFor]="retrieveChipList"
          [matChipInputAddOnBlur]="true"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          (matChipInputTokenEnd)="addRetrieveEmails($event)"
        />
      </mat-chip-list>
    </mat-form-field>

Answer 2

Не чистый или сухой, как я себе представляю. Но я попробовал «установить метод» и не работал из коробки ...

Требуется некоторый рефакторинг () => {simpleVersion} (надеюсь, это кому-нибудь поможет)

component.ts

...
  // standard stuff...
  form: FormGroup;
  isEditing = false;
...
  // build the form...
  buildForm() {
    this.form = this.FormBuilder.group({
      key: [{value:'locked', disabled: !this.isEditing}],
      name: [],
      item: [],
      active: [false]
    })
  }
  // map the controls to "this" object
  // => i.e. now you can refer to the controls directly (ex. this.yourControlName)
  get key() { return <FormControl>this.form.get('key') }
  get name() { return <FormControl>this.form.get('name') }
...
  // ----------------------------------------
  //     THE GRAND FINALÉ - disable entire form or individual controls
  // ----------------------------------------
  toggleEdit() {
    if(!this.isEditing) {
      this.key.enable();      // controls
      this.name.enable();
      // this.form.enable();     // the form

      this.isEditing = !this.isEditing;
    } else {
      this.key.disable();      // the controls
      this.name.disable();     // the controls

      // this.form.disable();     // or the entire form

      this.isEditing = !this.isEditing;
    }
   }

и, возможно, излишнее использование HTML-логики, так что надеемся, что бонусный встроенный переключатель ngClass так же полезен.

component.html (кнопка переключения)

<div class="btn-group" (click)="toggleEdit()">
           <label
             class="btn"
             role="button"
             [ngClass]="{'btn-success': isEditing,
                         'btn-warning': !isEditing}">toggle edit
           </label>
</div>

Answer 3

---

Отключить TextBox в угловых 7

<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]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

Answer 4

В Реактивной форме вы можете отключить все поля формы с помощью this.form.disable(). В управляемой шаблоном форме вы можете отключить все поля формы с помощью this.myform.form.disable(), где myForm равен @ViewChild('form') myForm;

Answer 5

Для ввода используйте [только для чтения], а не [отключено], и оно будет работать

Answer 6

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

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

Answer 7

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

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

Answer 8

Одним из решений является создание директивы и использование привязки для нее, как описано в здесь

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 ) {
  }

}

тогда

<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>