I have an Angular 7 component with a form that includes the following TypeScript code:
export class MessageComponent implements OnInit {
message: FormGroup;
constructor(private formBuilder: FormBuilder, private messageService: MessageService) { }
ngOnInit() {
this.message = this.formBuilder.group({
content: ['']
});
}
onSubmit() {
if (this.message.valid) {
let request: SendMessageRequest = {
content: this.message.value.content
};
this.messageService.send(request).subscribe(
(response: SendMessageResponse) => {
this.message.reset();
},
(error) => {
// Handle errors
}
);
}
}
}
The corresponding HTML form looks like this:
<form [formGroup]="message" (ngSubmit)="onSubmit()">
<label for="content">Content</label>
<textarea id="message" formControlName="content"></textarea>
<button class="action" type="submit">Send Message</button>
</form>
Is there a way to disable the button while the message is being sent by the service?
Also, how can I add a specific CSS class to the disabled button?