以下のような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();