Please carefully review the Description below before proceeding:
This is an HTML file containing code snippets:
<div class="row col-md-2">
<mat-form-field appearance="outline" class="nameInput col-md-2">
<mat-label>One</mat-label>
<input
matInput
[(ngModel)]="One"
(ngModelChange)="onChangeDisable()"
/>
</mat-form-field>
</div>
<div class="row col-md-2">
<mat-form-field
appearance="outline"
class="nameInput col-md-2"
>
<mat-label>Two</mat-label>
<input
matInput
[(ngModel)]="Two"
(ngModelChange)="onChangeDisable()"
[disabled]="twoDisabled"
/>
</mat-form-field>
</div>Here is the TypeScript file content:
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
One:any;
Two:any;
twoDisabled=true;
onChangeDisable() {
if (this.One != null) {
this.twoDisabled = false;
}
}
}
I have two input boxes named "One" and "Two". Initially, both are enabled. However, when a value is entered into the first input box, the second input box should become disabled. If the first input box is cleared, then the second one should be enabled again. The same functionality applies to the second input box. How can I achieve this?
Link to my StackBlitz project --> https://stackblitz.com/edit/mat-input12345677709-gfj1-gxqswz-u1tbuk