Text Input - Copy this React, Tailwind Component to your project
Tengo el siguiente componente de Angular llamado login.component.html: <form class="d flex flex wrap h 100 align content between align content md center needs validation" [formGroup]="formGroup"> <div class="row container g 3 mb 5"> <h1 class="row my 5">Ingresá a tu cuenta</h1> <input type="text" class="form control p 3" [ngClass]="{ 'is valid': this.formGroup.get('email')?.valid && (this.formGroup.get('email')?.touched || this.formGroup.get('email')?.dirty), 'is invalid': this.formGroup.get('email')?.invalid && (this.formGroup.get('email')?.touched || this.formGroup.get('email')?.dirty) }" placeholder="Ingresá tu correo electrónico" formControlName="email" required> <div class="valid feedback"> Looks good! </div> <div id="validationServerUsernameFeedback" class="invalid feedback"> Please choose a username. </div> <input type="text" class="form control p 3" [ngClass]="{ 'is valid': this.formGroup.get('password')?.valid && (this.formGroup.get('password')?.touched || this.formGroup.get('password')?.dirty), 'is invalid': this.formGroup.get('password')?.invalid && (this.formGroup.get('password')?.touched || this.formGroup.get('password')?.dirty) }" placeholder="Ingresá tu correo contraseña" formControlName="password" required> <div class="valid feedback"> Looks good! </div> <div id="validationServerPasswordFeedback" class="invalid feedback"> Please choose a username. </div> <a class="p 1 text end text success rounded" href="">Olvidé mi contraseña</a> </div> <div class="row container g 3"> <button class="btn btn success btn lg rounded 4 p 3" (click)="login()">Ingresar</button> <p class="text center">¿No tienes una cuenta? <a class="text success" href="">¡Registrate aqui!</a></p> </div> </form> y el login.component.ts es el siguiente, excluyendo sus importaciones: @Component({ selector: 'app login', standalone: true, imports: [CommonModule, TextInputComponent, ReactiveFormsModule], templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { private readonly _formBuilder = inject(FormBuilder); formGroup = this._formBuilder.nonNullable.group({ email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.pattern('(?=.*[0 9])(?=.*[a zA Z]).{8,}')]] }) classConrol = computed(()=>({ 'is valid': this.formGroup.get('email')?.valid && (this.formGroup.get('email')?.touched || this.formGroup.get('email')?.dirty), 'is invalid': this.formGroup.get('email')?.invalid && (this.formGroup.get('email')?.touched || this.formGroup.get('email')?.dirty) })); } Ahora necesito crear un nuevo componente llamado text input, necesito que implementes text input.component.html y text input.component.ts y lo utilices dentro de login.component.html, el componente text input sera cada <input> dentro e login.component.html y el funcionamiento debe quedar exactamente igual.
