Angular 6, как сделать все элементы ввода не редактируемыми внутри формы

Если вы используете реактивную форму, вы можете достичь этого программно следующим образом (подход по одному):

 this.formGroupName.controls[controlNmae].disable();

Например: this.formGroupName.controls['lastName'].disable()

Чтобы отключить все сразу:

this.formGroupName.disable()

В вашем случае: this.leaseholderForm.disable()
А чтобы повернуть обратно, сделайте: this.leaseholderForm.enable()

Что вы можете сделать, так это создать такую ​​функцию и вызвать ее после вызова createLeaseholderForm():

disableForm() {
 this.leaseholderForm.disable()
}  

для получения дополнительной информации прочтите это.

Создайте FormGroup, как описано здесь:

https://angular.io/guide/reactive-forms#add-a-formgroup

Затем программно возьмите экземпляр formGroup и вызовите на нем .disable(), например:

this.leaseholderForm.disable()

Используйте атрибут disable в шаблоне html.

           <mat-form-field>
                <input matInput upperCaseInput placeholder = "Nom d'usage" formControlName = "lastName" disable>
            </mat-form-field>

Отключено и недоступно для редактирования - не обязательно одно и то же. Отключенный ввод, конечно, также нельзя редактировать, но он имеет отчетливый вид - серый и выглядит «отключенным». Вход только для чтения выглядит так же, как обычный вход, но не редактируется. Поэтому вы должны спросить, действительно ли вы хотите, чтобы ваши элементы управления были отключены или только для чтения.

Если вы хотите только для чтения, вы можете просто использовать свойство 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>

Поскольку атрибут отключен не работает с некоторыми компонентами, я сделал следующее: я установил указатель-события: нет в css, чтобы охватить все компоненты внутри содержимого div.

Вот мой код CSS:

.disabledDiv {
      pointer-events: none;
      opacity: 0.4;   }

Вот мой HTML:

<div class = "content-area" [ngClass] = "{disabledDiv: !isActiveDiv}"> 
    <!-- other components here (input/select/etc.) -->
<div> 

И на моем ТС:

editData() {
    this.isActiveDiv = true;
  }

Используйте атрибут readonly в файле HTML внутри тега input.

this.formGroupName.controls['lastName'].disable()

У меня не сработало в Angular 8. Я заставил его работать, добавив атрибут «только для чтения» внутри HTML, а затем изменив его значение в файле .ts.

внутри файла .html

 <input formControlName = "email" matInput type = "email" #email email = "true" [readonly] = "email_readonly" />

внутри файла .ts

email_readonly = false;

yourFunction()
{
  this.email_readonly = true;
}