CODEWITHSUNDEEP
angularangular-materialangular-reactive-forms
Yuvals
Yuvals

Reputation: 3266

Disabled is not working in Angular reactive forms

I am trying to use disabled on a material form input : 

<mat-form-field>
  <input 
    matInput 
    formControlName="date" 
    [matDatepicker]="dp3" 
    placeholder="YYYY-MM-DD">
  <mat-datepicker-toggle 
    matSuffix 
    [for]="dp3">
  </mat-datepicker-toggle>
  <mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>

My form control is defined as follow: 

this.dateAmountFormGroup = this.fb.group({
  date: new FormControl({
    value: '',
    disabled: true
  }),
});

However, when clicking on the input field, it is not getting disabled.

Upvotes: 0

Views: 1556

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

Looks like you're using disabled="false" in <mat-datepicker #dp3 disabled="false"></mat-datepicker>

That's why the form field is not getting disabled.

You might want to change your implementation like this:

Template:

<form [formGroup]="dateAmountFormGroup">
  <mat-form-field>
    <input 
      matInput 
      [matDatepicker]="picker1" 
      placeholder="Angular forms" 
      formControlName="date">
    <mat-datepicker-toggle 
      matSuffix 
      [for]="picker1">
    </mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
  </mat-form-field>
</form>

Class:

export class DatepickerValueExample {
  ...
  dateAmountFormGroup: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    ...
    this.dateAmountFormGroup = this.fb.group({
      date: new FormControl({
        value: new Date(),
        disabled: true
      }),
    });
    ...
  }

  ...

}

Here's a Sample StackBlitz for your ref.

Upvotes: 1

Related Questions