it-swarm.com.ru

Не удается отключить элемент matInput с помощью [formControlName]

Я использую matInput и mat-form-field (@ angular/material) в компоненте Angular и ​​не могу отключить matInput.

Рабочий пример можно увидеть здесь.

Кажется вероятным, что я упускаю что-то очевидное, но за свою жизнь я не могу понять, что. Это ошибка?

Если я удалю [formControlName] из CustomFormInputComponent, тогда я смогу успешно отключить matInput

CustomFormInputComponent:

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-input',
  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
    </mat-form-field>
  `,
})
export class CustomFormInputComponent  {
  @Input() form: FormGroup;
  @Input() formControlName: string = 'name';
  @Input() disabled = false;
}

AppComponent:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <p>At least one of these inputs should be disabled, but none are :(</p>

    <app-custom-form-input [form]="form" [disabled]='true'></app-custom-form-input>

    <app-custom-form-input [form]="form" [disabled]="'disabled'"></app-custom-form-input>
  `,
})
export class AppComponent  {
  public form: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ''
    })
  }
}

Любые идеи с благодарностью!

Ответ

Для получения дополнительной информации об ответе Дэвида: Angular обновляет состояние DOM на основе отключенного состояния элемента управления реактивной формы. Я думаю, что происходит: angular отображает CustomFormInputComponent перед AppComponent и делает компонент отключенным. Затем создается компонент AppComponent и создается form с включенным элементом управления name. Angular затем отключается и отключает элемент ввода DOM (это поведение, как задумано).

5
John

Если вы используете FormGroup, то вам не следует отключать форму в шаблоне HTML. Это не будет работать, если вы попытаетесь отключить в HTML вместе с FormControl. Вместо этого это должно быть сделано в FormGroup. Попробуй это:

  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName">
    </mat-form-field>
  `

а также:

ngOnInit() {
    this.form = this.fb.group({
        name: new FormControl({ value: '', disabled: this.disabled })
    });
}

Кроме того ... не имеет большого значения, но .. вы действительно должны делать:

public form: FormGroup;

вместо:

public form: any;

Не забывайте и об импорте

import { FormGroup, FormControl } from '@angular/forms';

Кстати, имя внутри объявления группы форм должно совпадать с тем, что вы задали в HTML . Итак:

<input formControlName="myInputName">

а также

this.form = this.fb.group({
    myInputName....
});
11
David Anthony Acosta

Если вы используете FormGroup, вы должны использовать отключенную promerty, создавая FormGroup/FormControl:

name: new FormControl({ value: '', disabled: this.disabled })

Но если вы хотите отключить/включить, вы можете использовать это в своем HTML:

<input type="text" formControlName="name" [attr.disabled]="isDisabled == true ? true : null" />
0
juanjinario