Disable Angular 5 Input fields correct way

You can change the assignment of the variable to a setter method so that you'd have:

set isDisabled(value: boolean) { this._isDisabled = value; if(value) {  this.form.controls['name'].disable(); } else {    this.form.controls['name'].enable();  }}

One solution is creating a directive and using binding for that as described in here

import { NgControl } from '@angular/forms';@Directive({  selector: '[disableControl]'})export class DisableControlDirective {  @Input() set disableControl( condition : boolean ) {    const action = condition ? 'disable' : 'enable';    this.ngControl.control[action]();  }  constructor( private ngControl : NgControl ) {  }}

then

<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>

NOTE:

Doesn't work with Ivy

Disable TextBox in Angular 7

<div class="center-content tp-spce-hdr">  <div class="container">    <div class="row mx-0 mt-4">      <div class="col-12" style="padding-right: 700px;" >          <div class="form-group">              <label>Email</label>                <input [disabled]="true" type="text" id="email" name="email"                 [(ngModel)]="email" class="form-control">          </div>     </div>   </div> </div>