formulario de inicio de sesión usando la validación de patrón en el ejemplo de código angular

Después de de nuestra prolongada recopilación de información pudimos solucionar esta incógnita que pueden tener muchos lectores. Te ofrecemos la respuesta y nuestro objetivo es serte de mucha apoyo.

Ejemplo 1: validación del formulario de inicio de sesión usando patrón en angular

<h3>ReactiveForm</h3><p *ngIf="isValidFormSubmitted && userForm.pristine"[ngClass]="'success'">Form submitted successfully.</p><form [formGroup]="userForm"(ngSubmit)="onFormSubmit()"><table><tr><td>UserName:</td><td><input formControlName="username"><div *ngIf="username.errors && isValidFormSubmitted != null && !isValidFormSubmitted"[ngClass]="'error'"><div *ngIf="username.errors.required">User name required.</div><div *ngIf="username.errors.pattern">User name not valid.</div></div></td></tr><tr><td>Password:</td><td><input type="password" formControlName="password"><div *ngIf="password.errors && isValidFormSubmitted != null && !isValidFormSubmitted"[ngClass]="'error'"><div *ngIf="password.errors.required">Password required.</div><div *ngIf="password.errors.pattern">Password not valid.</div></div></td></tr><tr><td>MobileNumber:</td><td><input formControlName="mobileNumber"><div *ngIf="mobileNumber.errors && isValidFormSubmitted != null && !isValidFormSubmitted"[ngClass]="'error'"><div *ngIf="mobileNumber.errors.pattern">Mobile number not valid.</div></div></td></tr><tr><td>Email:</td><td><input formControlName="email"><div *ngIf="email.errors && isValidFormSubmitted != null && !isValidFormSubmitted"[ngClass]="'error'"><div *ngIf="email.errors.pattern">Email not valid.</div></div></td></tr><tr><td colspan="2"><button>Submit</button></td></tr></table></form>

Ejemplo 2: validación del formulario de inicio de sesión usando patrón en angular

importComponent,OnInitfrom'@angular/core';importFormControl,FormBuilder,Validatorsfrom'@angular/forms';importUserServicefrom'./user-service';importUserfrom'./user';

@Component(
   selector:'app-reactive',
   templateUrl:'./reactive-form.component.html')exportclassReactiveFormComponentimplementsOnInit0)?[0-9]10$"; 
  emailPattern ="^[a-z0-9._%+-][email protected][a-z0-9.-]+.[a-z]2,4$";
  
  isValidFormSubmitted =null;
  
  userForm =this.formBuilder.group(
    username:['',[Validators.required,Validators.pattern(this.unamePattern)]],
    password:['',[Validators.required,Validators.pattern(this.pwdPattern)]],
    mobileNumber:['',Validators.pattern(this.mobnumPattern)],
    email:['',Validators.pattern(this.emailPattern)],);constructor(private formBuilder:FormBuilder,private userService:UserService)ngOnInit()onFormSubmit()this.isValidFormSubmitted=false;if(this.userForm.invalid)return;this.isValidFormSubmitted=true;let user:User=this.userForm.value;this.userService.createUser(user);this.userForm.reset();getusername()returnthis.userForm.get('username');getpassword()returnthis.userForm.get('password');getmobileNumber()returnthis.userForm.get('mobileNumber');getemail()returnthis.userForm.get('email');

Sección de Reseñas y Valoraciones

Puedes añadir valor a nuestra información participando con tu veteranía en los comentarios.

---

---

Utiliza Nuestro Buscador