Отключение поля ввода MatFormField в Angular

Question

Я знаю, что были похожие вопросы по этой теме, но ни один из них не помог мне, поскольку решения зависят от AngularJS или JQuery.

В Angular 5, я пытаюсьотключите <input> из <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>

Но это не работает вообще.Я даже пытался установить disabled=true, но это не помогло.Кроме того, я не могу отключить другие поля формы в моем компоненте.

Вот так выглядит мой TypeScript файл:

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" : "";
 }
 }

Чего мне не хватает?

Любая помощь очень ценится!

Answer 1

Создайте контроллер формы для ab (ваш ввод) и установите для свойства отключения значение true.

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