1

tengo un formulario reactivo en angular 10, tengo varios input radios y select. todo funciona bien excepto el radio. lo que quiero es que al tratar de enviar el formulario con los campos vacios o no seleccionados me aparezca un aviso y no me deje. funciona todo pero el radio no funciona aqui mi codigo de nombre y los radios como ejemplo

<form [formGroup]="registerForm">
<div class="modal-body">
    <div class="form-group">
            <label>NOMBRE</label>
            <input type="text" formControlName="nombre" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
            <div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
              <p *ngIf="f.nombre.errors.required">requiere NOMBRE</p> 
              <p *ngIf="f.nombre.errors.minlength">Mínimo 4 char</p>
              <p *ngIf="f.nombre.errors.pattern">Ingrese solo letras</p>              
            </div>
     </div>

<div class="form-group">
            <label>Genero</label>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" id="Masculino" formControlName="genero" name="genero" value="M">
              <label class="form-check-label" for="Masculino">Masculino</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" id="Femenino" formControlName="genero" name="genero" value="F">
              <label class="form-check-label" for="Femenino">Femenino</label>
            </div>
            <div *ngIf="submitted && f.genero.errors" class="invalid-feedback">  
              <p *ngIf="f.genero.errors.required"> Seleccione un genero </p>          
            </div>
          </div>
</div>
</form>

en el ts lo tengo asi

this.registerForm = this.formBuilder.group({
nombre:['',[Validators.required,Validators.minLength(3),Validators.pattern(/^([A-Za-z áÁéÉíÍóÓúÚñÑüÜ]+)$/)]],
genero:['',[Validators.required]]
})

psta: el formulario esta en un modal. y uso bootstrap5

1 respuesta 1

0

Aunque no se ve en lo que publicaste la definicion de varias variables ni metodos por ejemplo get f()-->creo deben ser de este tipo agregue también otra forma ..probé en un proyecto el siguiente codigo y funciona dando aviso al no completar el formulario en los campos nombre y genero y responde a *ngIf="submitted && f.genero?.errors?.required"

import { Component, OnInit } from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.scss']
})

export class NameEditorComponent implements OnInit {
  registerForm!: FormGroup;
  submitted=false;
  constructor(private formBuilder:FormBuilder) { }

  ngOnInit(): void {
    this.registerForm = this.formBuilder.group(
      {
      nombre:['',[Validators.required,Validators.minLength(3),
        Validators.pattern(/^([A-Za-z áÁéÉíÍóÓúÚñÑüÜ]+)$/)]
      ],
      genero:['',Validators.required]
      })

  }
  get f(): { [key: string]: AbstractControl } {
    return this.registerForm .controls;
  }
  onSubmit(): void {
    this.submitted = true;

    if (this.registerForm.invalid) {
      return;
    }
    console.log(JSON.stringify(this.registerForm.value, null, 2));
  }
  onReset(): void {
    this.submitted = false;
    this.registerForm.reset();
  }

  get nombre() {
    return this.registerForm.get('nombre');
 }
 get genero() {
  return this.registerForm.get('genero');
}


}
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" novalidate>


  <div class="modal-body">




    <div class="form-group">
      <p>
        <label for="nombre">Nombre</label>
        <input type="text" formControlName="nombre" class="form-control form-control-sm"
          [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
      </p>

      <div *ngIf="submitted && f.nombre.errors">
        La cantidad minima de caracteres es 3
      </div>
       <div *ngIf="registerForm.controls['nombre'].invalid
   && (registerForm.controls['nombre'].dirty ||
    registerForm.controls['nombre'].touched)" class="text-danger">

    <div *ngIf="registerForm.controls['nombre'].errors?.required">

      complete el campo nombre

    </div>
  </div>
    </div>

    <div class="form-group">
      <label>Genero</label>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" id="Masculino" formControlName="genero" name="genero" value="M">
        <label class="form-check-label" for="Masculino">Masculino</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" id="Femenino" formControlName="genero" name="genero" value="F">
        <label class="form-check-label" for="Femenino">Femenino</label>
      </div>

      <div *ngIf="submitted && f.genero?.errors?.required"
class="alert alert-danger">
Seleccione un genero
  </div>

    </div>
    <div *ngIf=" submitted&& registerForm.invalid">
      <p>Debe completar el Formulario</p>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Register</button>
      <button type="button" (click)="onReset()" class="btn btn-warning float-right">
        Reset
      </button>
    </div>
  </div>
</form>
Modificando el estilo de los botones de tipo radio también modifique genero en ts.Cualquier cosa comentame

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="modal-body">
    <div class="form-group">

      <label for="nombre">Nombre</label>
      <input type="text" formControlName="nombre" class="form-control form-control-sm"
        [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />


      <div *ngIf=" registerForm.controls['nombre'].invalid
      && (registerForm.controls['nombre'].dirty ||
       registerForm.controls['nombre'].touched)" class="alert alert-danger">

        <div [hidden]="!f.nombre.errors?.pattern">
          Caracter no permitido!
        </div>

        <div [hidden]="!f.nombre.errors?.minlength">
          La cantidad minima de caracteres es 3!
        </div>

        <div [hidden]="!f.nombre.errors?.required">
          Nombre es requerido
        </div>

      </div>

    </div>


    <div class="form-group">

      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary active">
          <input type="radio" name="genero" id="Masculino" formControlName="genero" value='Masculino'> M
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="genero" id="Femenino" formControlName="genero" value='Femenino'> F
        </label>
      </div>


      <div *ngIf="submitted && f.genero?.errors?.required" class="alert alert-danger">
        Seleccione un genero
      </div>

    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Register</button>
      <button type="button" (click)="onReset()" class="btn btn-warning float-right">
        Reset
      </button>
    </div>
  </div>

</form>

2
  • Gracias por tu respuesta, me sirvió. Agradecido el 10 dic. 2021 a las 23:35
  • Si te sirvió y no buscas mas repuestas recoda marcar la respuesta como util saludos
    – nestdan
    el 11 dic. 2021 a las 11:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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