1

solicito de su colaboración para que me indique como puedo validar un campo de texto que depende del valor seleccionado en un Radio button; realmente lo que necesito es activar el campo observaciones solamente si se selecciona la opcion 4, pero el formulario lo muetra como invalido.

Class

Class

export class AppComponent {

  testForm: FormGroup;
  msgError: string = 'Este Campo es obligatorio';

  opciones = [
    { nombre: 'N1', valor: 1 },
    { nombre: 'N2', valor: 2 },
    { nombre: 'N3', valor: 3 },
    { nombre: 'Otra Respuesta', valor: 4 },
  ];

  constructor(public fb: FormBuilder) {

    this.testForm = this.fb.group({
      'opcionA': ['', [Validators.required]],
      'observacionA': new FormControl(null)
    }, {
        validator: this.specificValue
      });
  }

  valido(): boolean {
    return !this.testForm.valid;
  }

  specificValue(group: any) {
    if (!group.controls.opcionA || !group.controls.opcionA.value) return;

    const opcionA = group.controls.opcionA.value;
    let observacionA = group.controls.observacionA.value;
    if (opcionA == '4') {
      if (observacionA) {
        return {
          return: null
        };
      } else {
        return {
          isRequired: true
        };
      }
    }
  }

  guardar() {
    console.log(this.testForm.value);
  }

}

Html

<h1>Form</h1>

<form [formGroup]="testForm" (ngSubmit)="guardar()" novalidate>
  <label *ngFor="let opcion of opciones">
  <input type="radio" 
        formControlName="opcionA"
        required
        [value]="opcion.valor">{{opcion.nombre}}
</label>
  <div *ngIf="testForm.get('opcionA').invalid">
    {{ msgError }}
  </div>
  <div *ngIf="testForm.value.opcionA === 4">
    <textarea formControlName="observacionA"></textarea>
    <div *ngIf="testForm.get('observacionA').invalid">
      {{ msgError }}
    </div>
  </div>
<br>
<hr>
  <button [disabled]="valido"
          type="submit">
  Save
</button>
</form>

{{testForm.valid}}

Demo in stackblitz

1 respuesta 1

1

La función de validación ha de cumplir la siguiente firma:

interface ValidatorFn { 
  (c: AbstractControl): ValidationErrors|null
}

Tu función no la cumple cuando opcionA no es 4, puesto que no se entra en el bloque if y por tanto no se devuelve nada. Eso es equivalente a devolver undefined, que no es lo mismo que null.

Cuando opcionA es 4, entonces, si observacionA es un valor "verdadero", no estás devolviendo null, sino un objeto equivalente al siguiente:

let obj= {
    return: null
}

Con lo que tampoco devuelves lo que el framework espera.

1
  • Entiendo loq eu dices, es posible agregarle validacion a el campo observacionA...? @Pablo Lozano
    – Gdaimon
    Commented el 2 oct. 2017 a las 16:24

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.