How to set input field attribute 'readonly' from Angular component

Question

I want to set 'readonly' property of quantity field during keypress on assetId field.

 <!-- Asset ID Field-->
  <div class="form-group">
     <label for="Asset ID">Asset ID:</label> 
      <input autocomplete="off" type="text" class="form-control" id="assetId" name="assetId" formControlName="assetId" (keypress)="setAssetId()">
 </div>

<!-- Quantity Field-->
<div class="form-group">
  <label for="Quantity">Quantity:</label> 
  <input autocomplete="off" type="text" class="form-control" id="quantity" name="quantity" formControlName="quantity">
</div>

Here is my angular function:

public setAssetId(){
   console.log('Key changed');
   this.form.controls['quantity'].patchValue(1);
   this.form.controls['quantity'].set('readonly'); // I want to something like that
}

Please help me regarding this...

Answer 1

You can set a property to the input event as following:

Typescript:

 isOk: boolean;
 public setAssetId(){
      ....
      isOk = true; 
 }

HTML

 <input autocomplete="off" [readonly]="isOk" type="text" class="form-control" id="quantity" name="quantity" formControlName="quantity">