web-dev-qa-db-ja.com

[formControlName]でmatInput要素を無効にできません

AngularコンポーネントでmatInputとmat-form-field（@ angular/material）を使用していますが、matInputを無効にすることはできません。

実際の例はこちらにあります

私は明らかな何かを見逃しているようですが、私の人生では何を理解することはできません。これはバグですか？

CustomFormInputComponentから[formControlName]を削除すると、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入力要素を無効にします（これは設計どおりの動作です）。

angularangular-materialangular-material2
9
John

FormGroupを使用している場合、HTMLテンプレートでフォームを無効にしないでください。 FormControlとともにHTMLで無効にしようとすると、機能しません。代わりに、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....
});
19
David Anthony Acosta

同じ問題があり、* ngIfディレクティブで解決しました。入力を無効にする必要がある場合は、無効にし、フォームバインディングを削除して、値を手動で指定します。そうでない場合は、formControlをそのまま使用します。

これはあなたのテンプレートです：

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

次のように変更します：

<mat-form-field *ngIf="disabled">
  <input matInput placeholder='Name' [value]="form.formControlName" disabled='true'>
</mat-form-field>
<mat-form-field *ngIf="!disabled" [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName">
</mat-form-field>
1
boyukbas

-> output これを試してください。

.htmlファイル

   <form name="fg" [formGroup]="fg" >
        <mat-form-field >
                  <input matInput placeholder="Email" formControlName="email">
           </mat-form-field>
    </form>

.tsファイルはこれをインポートします：import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private _formBuilder: FormBuilder) { }



   this.fg= this._formBuilder.group({
        email :[
            {
              value : '[email protected]',
              disabled: true
            },
Validators.required
        ],
1
Vijay Prajapati

材料を使用している場合は、追加できます

<mat-form-field [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName" readOnly>
</mat-form-field>
0
N_B

FormGroupを使用している場合、FormGroup/FormControlを作成する無効なpromertyを使用する必要があります。

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

ただし、無効/有効にする場合は、HTMLでこれを使用できます。

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