Disabling an input field of a MatFormField in Angular

Question

I know there has been similar questions about this topic but none of them worked for me since the solutions depend on either AngularJS or JQuery.

In Angular 5, I'm trying to disable the <input> of a <mat-form-field>:

test.component.html

<mat-form-field class="example-form">
  <input matInput disabled [matDatepicker]="picker" [value]="startDate || ab.value" placeholder="Gültig ab" [formControl]="ab">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker disabled="false" ></mat-datepicker>
</mat-form-field>

But this doesn't work at all. I even tried to set disabled=true but this didn't get the job done. Additionally, I can't disable any of the other form fields in my component.

This is how my TypeScript file looks like:

test.component.ts

import ...

@Component({ ... })

export class TestComponent implements OnInit {
// A Couple of @Input statements
@Input() ...

// Create Formcontrollers
 controlNumber = new FormControl("", [Validators.pattern("[0-9]*")]);
 controlText = new FormControl("", [Validators.pattern("[A-Z-a-z]*")]);
 datePicker = new FormControl(moment());


 constructor(private http: HttpClient) {  }

 ngOnInit() {
 }

 ...

 getNotANumberMessage() {
  return this.controlNumber .hasError("pattern") ? "Numbers only" : "";
 }

 getNotAStringMessage() {
   return this.controlText.hasError("pattern") ? "Strings only" : "";
 }
 }

What am I missing?

Any help is highly appreciated!

Sachila Ranawaka · Accepted Answer · 2018-12-14 15:47:08Z

2

Create a formcontroller for ab (your input) and set the disable property true.

ab = new FormControl("", [ Validators.pattern("[A-Z-a-z]*"), disabled:true ]);

answered Dec 14, 2018 at 15:47

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Big Dude Over a year ago

You meant this, right? ab = new FormControl({value: "", disabled: true}, Validators.pattern("[A-Za-z]*")); See the Official Documentation for further information

Collectives™ on Stack Overflow

Disabling an input field of a MatFormField in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related