I've come across similar questions on this topic, but none of the solutions seem to work for me as they rely on either AngularJS or JQuery.
Within Angular 5, my goal is to disable the <input> within a <mat-form-field>:
test.component.html
<mat-form-field class="example-form">
<input matInput disabled [matDatepicker]="picker" [value]="startDate || ab.value" placeholder="Effective from" [formControl]="ab">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker disabled="false" ></mat-datepicker>
</mat-form-field>
However, I haven't been able to make this work. Despite trying to set disabled=true, it still doesn't achieve the desired outcome. Moreover, I'm facing difficulties when attempting to disable other form fields within my component.
Here's a snippet from my TypeScript file:
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") ? "Please enter numbers only" : "";
}
getNotAStringMessage() {
return this.controlText.hasError("pattern") ? "Please enter strings only" : "";
}
}
What could I be overlooking?
Your assistance would be greatly appreciated!