Puedes usar formControls
de angular para validarlo, te pongo un ejemplo.
Es necesario importar FormsModule
y ReactiveFormsModule
en app.module
para tener disponibles las funciones necesarias.
Primero en tu TS es necesario crear los formControls
de tus inputs o elementos con sus correspondientes validadores para hacer requerido el input y posteriormente creas un formGroup
con estos formControls
para que funcione en la etiqueta form
y puedas validar un formulario completo.
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
public name = new FormControl('', Validators.required);
public lastName = new FormControl('', Validators.required);
public newForm = new FormGroup({
name: this.name,
lastName: this.lastName,
});
ngOnInit(): void {
}
public onSubmit(){
}
}
Despues en tu html agregas un form y los inputs o elementos que necesites y al final el boton con la propiedad disabled
bindeada el validador del formGroup
hará la magia para que el botón se actualice conforme la configuración, ya que los validadores ademas de solo validar que exista algo en el input, se pueden validar tipos de datos como string, number, estructuras como email y hasta longitud de caracteres.
<div>
<form [formGroup]="newForm" (ngSubmit)="onSubmit()">
<label>
First Name:
<input type="text" formControlName="name">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
<br>
<button type="submit" [disabled]="!newForm.valid">Submit</button>
</form>
</div>
https://angular.io/guide/reactive-forms