¿Cómo hacemos esto en angular? Deshabilitar el botón de forma predeterminada si la dirección de correo electrónico no es válida. Si el correo electrónico no es válido, el botón de inicio se habilitará y el usuario puede hacer clic en el botón de inicio.
después de que el usuario haga clic en el botón Comenzar, se desactivará nuevamente y solo se habilitará nuevamente si el usuario cambia la entrada de correo electrónico y si la nueva entrada de correo electrónico es válida, viceversa.
Ya tengo los controles marcados y de formulario, pero ¿hay una forma más limpia de hacer esto en angular? Gracias.
#código HTML
<mat-form-field class="full-width" appearance="fill" style="margin-top: 20px;"> <mat-label>Email</mat-label> <input type="email" matInput autocomplete="emailAddress" matInput formControlName="emailAddress" /> <mat-error *ngIf="modelForm.get('emailAddress').hasError('email')"> Email is in invalid format. </mat-error> <mat-error *ngIf="modelForm.get('emailAddress').hasError('required')"> Email is required. </mat-error> </mat-form-field> </div> <div style="text-align:right;margin-top: 19.0px;"> <button click)="getStarted()" [disabled]="!modelForm.get('emailAddress')?.valid" mat-flat-button color="primary" class="v-btn-sml" id="get-started-button"> Get Started </button> </div>código de validación #ts
ngOnInit(): void { this.initFormGroup(); } initFormGroup() { this.modelForm = this.formBuilder.group({ id: [this.model.id || 0], emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]], }); }Angular ha incorporado validadores que puede usar, combinándolos con ReactiveFormsModule que debe importar en su app.module.ts.
En su archivo mecanografiado puede hacerlo como:
formGroup: FormGroup; private model: { id: number; emailAddress: string } = { id: 1, emailAddress: '' }; ngOnInit() { this.formGroup = new FormGroup({ id: new FormControl(this.model.id), email: new FormControl(this.model.emailAddress, [Validators.email]) }); }Y que en su archivo html puede acceder a este estado de formControls válido/no válido.
<form [formGroup]="formGroup"> <input type="text" formControlName="email"> <button type="button" [disable]="form?.get('emailAddress').invalid"> </form>