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; } } }