Getting Angular FormControl value and update button

I'm new to Angular and using angular FormControl and facing some issue as below.

I just have a input text with required validator. Based on input entered by user and if the text is valid, I want to enable one button. if input text is invalid, I want to disable button.

When running this, disabled button is never getting enabled. Please check and let me know some suggestions.

Here is my code. I'm using Angular reactive forms.

sample.html:

<label for="name">Name: </label>
<input type="text" [formControl]="userName" required>
<p>Value: {{ userName.value }}</p>
<button disabled="(userName.value === '')">{{ userName.value }}</button>


Sample.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NgModule } from '@angular/core';

@Component({
})

export class SampleComponent {
userName = new FormControl('')

ngOnInit(): void {
console.log("entered")
console.log(this.userName.getRawValue());
}
}

Continue reading...