1
resposta

Não consigo checar o radio-button

Olá pessoal, criei um componente para inputs do tipo radio, tudo funciona e não apresenta nenhum erro no console, porém na hora de checar, não funciona.

Segue o código do meu componente:

radio.component.html

<div class="col-md-12 d-block" [formGroup]="parent">
  <div *ngFor="let radio of radios" class="custom-control custom-radio custom-control-inline">
    <input type="radio" [formControlName]="name" [name]="bind" [(ngModel)]="bind" class="custom-control-input" [required]="required">
    <label class="custom-control-label" [for]="bind">{{ radio.value }}</label>
  </div>
</div>

radio.component.ts

import { Component, Input } from '@angular/core';
import { RadioButton } from './radio-button';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'ps-radio',
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css']
})
export class RadioComponent {

  @Input() name: string;
  @Input() bind: string;
  @Input() required: boolean = false;
  @Input() parent: FormGroup;
  @Input() radios: RadioButton[];
}

radio.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RadioComponent } from './radio.component';
import { MaterialModule } from '../../../../material.module';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    ReactiveFormsModule
  ],
  declarations: [RadioComponent],
  exports: [RadioComponent]
})
export class RadioModule { }

Eu criei uma classe chamada RadioButton para guardar as propriedades de um radio button, segue o código dela:

radio-button.ts

export class RadioButton {

  constructor(
    public cssClass: string = '',
    public value: string = ''
  ) {}
}

A maneira como eu uso esse componente:

  <ps-radio 
    name="sexo" 
    [bind]="segurado.sexo" 
    required="true"
    [radios]="sexoRadio"
    [parent]="seguradoFormGroup"
  ></ps-radio>

E por último, meu formGroup:

    this.seguradoFormGroup = this.formBuilder.group({
      nomeCompleto: ['', Validators.required],
      sexo: ['', Validators.required]
    });

Lembrando que não há nenhum erro no console. Desde já agradeço a ajuda de todos.

1 resposta

Fala aí Leo, beleza? Cara, não tem muito segredo, o formGroup irá ser responsável por fazer o check dado o radio selecionado:

Primeiro você precisaria criar o FormGroup:

testForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
    this.testForm = this.formBuilder.group({
        sex: ['']
    });
}

Depois, você adicionar o input do tipo radio e víncula o form com seu formGroup:

<form [formGroup]="testForm">
    <label>
        <input formControlName="sex" type="radio" value="F">
        Feminino
    </label>
    <label>
        <input formControlName="sex" type="radio" value="M">
        Masculino
    </label>
</form>

Repare que o formControlName tem que ser o mesmo para todos os radio's que fazem parte da mesma opção.

Espero ter ajudado