Is there anyone who can assist me? I am looking for help to modify the following code so that...
The button should only be clickable when the username field is not empty.
Clicking on the button should clear the username input.
Below is the code snippet:
username.html
<section class="username">
<input
type="text"
class="form-control"
(input)="onUpdateUsername($event)">
<button class="btn btn-primary"
[disabled] = "!allowNewUsername"
(click)="onCreateUsername();">Add Username</button>
<p class="test"> {{ usernameCreationStatus }} </p>
</section>
username.component.ts
export class UsernameCheckComponent implements OnInit {
allowNewUsername:boolean = false;
usernameCreationStatus = 'Nothing was created!';
userName = 'TestUsername';
constructor() {
setTimeout(() => {
this.allowNewUsername = true;
}, 2000);
}
ngOnInit(): void {
}
onCreateUsername () {
this.CreationStatus = 'Username was created! Username name is ' + this.serverName;
}
onUpdateUserName(event:Event) {
this.userName = (<HTMLInputElement>event.target).value;
}
}