I have created a basic webpage with an input field and a button. I want the button to be disabled when the input field is empty. Once the user clicks on it, the input field should be cleared or reset. However, even though my button gets disabled once clicked, it is not disabled from the beginning.
This is my code:
<input type='text' [(ngModel)]="userName">
{{userName}}
<button [disabled]="userName=='' (click)='resetUsername()'>Reset Username</button>
In the TypeScript file:
import {Component} from '@angular/core';
@Component({
selector: 'app-server',
templateUrl: './server.component.html'
})
export class Servercl {
username = ''
resetUsername = function(){
this.userName = '';
}
}
I am confused about where I might be going wrong. Although I am initializing the userName variable as empty from the start, there seems to be an issue. Can someone who is familiar with Angular 4 help me out?