1

El error que me da el log del navegador es el siguiente TypeError: Cannot read property 'siEsPersona' of undefined at push../src/app/modulos/residentes/datos-completos-residente/datos-residente/ficha-personal/contactos/edicion-contacto/edicion-contacto/edicion-contacto.component.ts.EdicionContactoComponent.validarPersona (edicion-contacto.component.ts:35)

Template:
Edición contacto

      <div class="radio" style="margin-left: 2%">
        <input type="radio" name="optradio" checked="checked" formControlName="optradio" id="r1" value="persona">
      </div>
      <div class="col-md-1">
        <label for="">Persona</label>
      </div>

      <div class="radio" style="margin-left: 2%">
        <input type="radio" name="optradio" formControlName="optradio" id="r2" value="entidad">
      </div>
      <div class="col-md-1">
        <label for="">Entidad</label>
      </div>
    </div>

    <div *ngIf="siEsPersona()" [formGroup]="form.get('edicion').get('persona')">
      <div class="row justify-content-between">
        <div class="col-md-3">
          <label for="nombre">Nombre</label>
          <input name="nombre" formControlName="nombre" class="form-control" type="text">
        </div>

        <div class="col-md-6">
          <label for="">Apellidos</label>
          <input class="form-control" type="text" name="apellidos" formControlName="apellidos">
        </div>
      </div>

      <div class="row">
        <div class="col-md-1">
          <label for="">DNI/NIE*</label>
          <select name="" id="" class="form-control">
            <option value="" disabled selected></option>
            <option value="1">DNI</option>
            <option value="2">NIE</option>
          </select>

        </div>
        <div class="col-md-2">
          <label for="">Nº DNI</label>
          <input type="text" class="form-control">
        </div>

        <div class="col-md-1">
          <label for="">Letra</label>
          <input type="text" class="form-control">
        </div>
        <div class="col-md-1">
          <br>
          <a href="#">
            <i class="fa fa-bullseye fa-3x" aria-hidden="true" title="Buscar"></i>
          </a>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-4">
          <label for="">Sexo*</label>
          <select name="" id="" class="form-control">
            <option disabled selected></option>
            <option value="">Hombre</option>
            <option value="">Mujer</option>
          </select>
        </div>
      </div>
    </div>


    <div *ngIf="siEsEntidad()" [formGroup]="form.get('edicion').get('entidad')">
      <div class="row">
        <div class="col-md-2">
          <label for="">CIF</label>
          <input type="text" name="" class="form-control" id="">
        </div>
        <div class="col-md-2">
          <br>
          <a href="#"><i class="fa fa-bullseye fa-3x" aria-hidden="true" title="Buscar"></i></a>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-6">
          <label for="">Nombre</label>
          <input type="text" class="form-control" readonly>
        </div>
      </div>
      <div class="row">
        <div class="col-md-5">
          <label for="">Persona de contacto en la entidad</label>
          <input type="text" class="form-control">
        </div>
      </div>
    </div>

.ts:

export class EdicionContactoComponent implements OnInit {
  @Input() form: FormGroup;
  constructor(private fb: FormBuilder ) {
    this.form = this.fb.group({
      edicion: this.fb.group({
        optradio: [null, { validators: [], updateOn: 'change' }],
        persona: this.fb.group({
          nombre: [null,{ validators: [],updateOn:'blur'}],
          apellidos: [null,{validators: [],updateOn:'blur'}],
          dni: [null,{validators: [this.validarPersona], updateOn:'blur'}],
          numDni: [null,{validators: [this.validarPersona], updateOn:'blur'}],
          letra: [null,{validators: [this.validarPersona], updateOn:'blur'}]
        }),
        entidad: this.fb.group({})
      }),
    })
  }

  ngOnInit() {

  }

  validarPersona(control: AbstractControl){
    const cont = control.value;
    let error = null;
    if(this.siEsPersona() == true){
      if(cont == null){
        error = {...error, required: 'Campo obligatorio'}
      }
    }
    return error;
  }

  siEsPersona() {
    if (this.form.get('edicion').get('optradio').value == 'persona') {
      return true;
    } else {
      return false;
    }
  }
  siEsEntidad() {
    if (this.form.get('edicion').get('optradio').value == 'entidad') {
      return true;
    } else {
      return false;
    }
  }

}

1 respuesta 1

1

Estás usando un método de tu componente como validador, pero cuando Angular aplica ese validador lo hace como una función, por lo que el contexto se ha perdido. Puedes solucionarlo usando .bind():

  constructor(private fb: FormBuilder ) {
    const validador = this.validarPersona.bind(this);
    this.form = this.fb.group({
      edicion: this.fb.group({
        optradio: [null, { validators: [], updateOn: 'change' }],
        persona: this.fb.group({
          nombre: [null,{ validators: [],updateOn:'blur'}],
          apellidos: [null,{validators: [],updateOn:'blur'}],
          dni: [null,{validators: [validador], updateOn:'blur'}],
          numDni: [null,{validators: [validador], updateOn:'blur'}],
          letra: [null,{validators: [validador], updateOn:'blur'}]
        }),
        entidad: this.fb.group({})
      }),
    })
  }
1

Tu Respuesta

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

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