Отключено и не доступно для редактирования - это не обязательно одно и то же. Отключенный ввод, конечно же, также не редактируется, но он имеет отчетливый вид - выделен серым цветом и выглядит «отключенным». Вход только для чтения выглядит так же, как обычный вход, но не редактируется. Таким образом, вы должны спросить, хотите ли вы, чтобы ваши элементы управления были фактически отключены или только для чтения. Похоже, вы просто хотите только для чтения. Для этого вам просто нужно использовать свойство readonly <input> и связать его с переменной в вашем контроллере. Например:
export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent {
@Input() editable: boolean = false; // doesn't have to be an @Input
...
}
<form [formGroup]="leaseholderForm" (ngSubmit)="onSubmit()">
<mat-form-field>
<input matInput [readonly]="!editable" upperCaseInput placeholder="Nom d'usage" formControlName="lastName">
</mat-form-field>
...
</form>
Обратите внимание, что свойство editable не обязательно должно быть @Input, но это может быть полезно, если вы используете форму в качестве повторно используемого компонента и вам нужно принять решение для редактирования / только для чтения в DOM уровень.
Для других компонентов, таких как переключатели, для которых недоступно свойство readonly, вам, вероятно, следует переосмыслить макет. Возможно, имеет смысл использовать другой компонент для отображения параметра радио в режиме только для чтения, а не полный список параметров. Например, используйте пару метка и значение:
<div *ngIf="editable; else readonlyRadio" class="mat-radio-group-inverted">
<mat-radio-group formControlName="civility">
<mat-radio-button color="primary" value="MR">M.</mat-radio-button>
<mat-radio-button color="primary" value="MME">MME.</mat-radio-button>
</mat-radio-group>
</div>
<div #readonlyRadio>
<label>Civility</label>
<span>{{ leaseholderForm.controls['civility'].value }}</span>
</div>