【Angular】inputにformControlNameが定義されている場合のdisabledに関して

以下のようなtsとhtmlにおいて、
<input> にdisabledを効かせようとしたが、formControlNameがあるとうまく機能しなかった。

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
})
export class ExampleComponent {
  constructor(private fb: FormBuilder) {}

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

2行目のはdisabledが有効だが、
3行目のはdisabledが効かない

<form [formGroup]="form">
  <input [disabled]="true" />
  <input formControlName="name" [disabled]="true" />
</form>

FormBuilderでdisabledを指定するか、

public form = this.fb.group({
  name: [{ value: '', disabled: true }, [Validators.required],
});

disable(), enable()を使えばよさそう

// disabledを有効にしたい場合
this.form.controls.name.disable();

// disabledを無効にしたい場合
this.form.controls.name.enable();

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です