0

Tengo un formulario tipo 'plantilla' muy simple que tiene solo 2 inputs y 1 botón de submit, no tengo manera que hacer que el atributo 'required' funcione, lo ignora completamente. Por lo demás funciona bien, al hacer submit los datos se imprimen correctamente por consola. Estoy usando Angular 17. Por si ayuda de algo la aplicación fue creada basada en la API Standalone, por lo que no tiene ngModules.

Plantilla:

<form (submit)="submit($event)">
  <div>
    <label for="user">
      Username:
    </label>
    <input [(ngModel)]="user" name="user" placeholder="Michael123" required>
  </div>
  <div>
    <label for="password">
      Password:
    </label>
    <input [(ngModel)]="password" name="password" placeholder="somepassword" required>
  </div>
  <button type="submit">Login</button>
</form>

Componente:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-template-form',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './template-form.component.html',
  styleUrl: './template-form.component.css'
})

export class TemplateFormComponent {

  public user: string = ''
  public password: string = ''

  submit(e: SubmitEvent) {
    e.preventDefault()
    let data = new FormData(e.target as HTMLFormElement)
    console.log({
      user: data.get('user'),
      password: data.get('password')
    })
  }
}

No tengo mucha experiencia con el framework, sepan entender.

1 respuesta 1

0

Lo solucione exportando ngModel a variables locales de plantilla para cada input, y con el atributo errors en conjunto con ngIf se pueden mostrar mensajes de error personalizados y desactivar el botón de submit cuando los campos no estén completos, articulo: Template driven form validations

<div>
  <form #myform="ngForm" (ngSubmit)="submit($event)">
    <div>
      <label for="user">
        Username:
      </label>
      <input #User="ngModel" required [(ngModel)]="user" name="user" placeholder="Michael123">
    </div>
    <div>
      <label for="password">
        Password:
      </label>
      <input #Password="ngModel" required [(ngModel)]="password" name="password" placeholder="somepassword">
    </div>
    <button *ngIf="!User.errors && !Password.errors" type="submit">Login</button>
    <button *ngIf="User.errors || Password.errors" type="submit" disabled>Login</button>
  </form>
  <div *ngIf="User.errors?.['required']">Name required</div>
  <div *ngIf="Password.errors?.['required']">Password required</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.