0

Tenho uma aplicação em angular 8 e tenho dois componentes, um pai e um filho e tenho um array de objetos no componente filho e necessito enviar a informação do array para o componente pai e colocar esse valor escolhido em um FormGroup

creat-category.component.ts(pai)

@Component({
  selector: 'app-creat-category',
  templateUrl: './creat-category.component.html',
  styleUrls: ['./creat-category.component.css']
})
export class CreatCategoryComponent implements OnInit {
  infoCategory: FormGroup;
  loading = false;

  constructor(
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit(): void {
    this.infoCategory = this.formBuilder.group({
      nameCategory: [null, Validators.required],
      subCategory: [false],
      selectSubCategory: [null],
    });
    console.log(this.infoCategory)
  }

  creatCategory(){
    this.loading = true;
    console.log(this.infoCategory.value);
    this.loading = false;
  }

  get c() { 
    return this.infoCategory.controls; 
  }

}

creat-category.component.html(pai)

<div class="container p-5">
    <form (submit)="creatCategory()" [formGroup]="infoCategory">
        <div class="form-group mb-3">
            <label>Nome da categoria</label>
            <input formControlName="nameCategory" type="text" class="form-control"/>
            <div class="invalid-feedback d-block" *ngIf="c.nameCategory.invalid && (c.nameCategory.dirty || c.nameCategory.touched)">
                Favor preencher este campo.
            </div>

        </div>
        <div class="form-group form-check">
            <input formControlName="subCategory" type="checkbox" class="form-check-input">
            <label class="form-check-label">Sub categoria</label>
        </div>
        <div *ngIf="infoCategory.value.subCategory">
            <app-sub-category></app-sub-category> 
        </div>
        

        <button [disabled]="!infoCategory.valid" class="btn btn-primary">Cadastrar produto</button>  
        <div *ngIf="loading" class="spinner-border spinner" role="status"></div>

    </form>
</div>

sub-category.component.ts(filho)

@Component({
  selector: 'app-sub-category',
  templateUrl: './sub-category.component.html',
  styleUrls: ['./sub-category.component.css']
})
export class SubCategoryComponent implements OnInit {
  
  subCategory: Object = [
    {
      "name": "Categoria 1",
      
    },
    {
      "name": "Categoria 2",
    }
  ];
  
  constructor() { }

  ngOnInit(): void {
  }
}

sub-category.component.html(filho)

<label>Nome da subcategoria</label>
<div class="form-group mb-3">         
    <select class="form-control">
        <option *ngFor="let s of subCategory" >{{ s.name }}</option>
    </select>
</div>

Necessito pegar o que foi escolhido na tag select e setar o valor a variável selectSubCategory do FormBuilder, tentei algumas coisa, como @Output e @Input mas não obtive sucesso.

1 Resposta 1

0

Olá. Existem varias maneiras para solucionar a troca de informação entre elemento pai e filho.

No seu caso, como essa informação deve ser enviada do filho ao pai quando o usuario fazer a ação de selecionar uma opção do select, pode ser uma boa ideia você trabalhar com EventEmiter.

Seu .ts filho, voce declara um Output EventEmitter, declare uma funcao enviarInformacao que emit um evento. Esse evento envia para o component pai as informacoes do select.

export class SubCategoryComponent implements OnInit{
   ...
   @Output() evento: EventEmitter<any> = new EventEmitter<any>()
   ...
   ngOnInit(){ ... }

   enviarInformacao(event){
     evento.emit(event.target.value)
   }
} 

html componente filho, coloque no select a declaracao que chama sua funcao enviarInformacao quando o valor do select mudar

<label>Nome da subcategoria</label>
<div class="form-group mb-3">         
    <select class="form-control" (change)="enviarInformacao($event)">
        <option *ngFor="let s of subCategory" >{{ s.name }}</option>
    </select>
</div>

No component pai HTML, perceba que seu ganha uma declaracao para "ficar escutando" o evento do Output, e quando for disparado (isto é evento.emit()), vai chamar uma funcao para receber a informacao e lá voce poder colocar no Formbuilder

<div class="container p-5">
    <form (submit)="creatCategory()" [formGroup]="infoCategory">
        <div class="form-group mb-3">
            <label>Nome da categoria</label>
            <input formControlName="nameCategory" type="text" class="form-control"/>
            <div class="invalid-feedback d-block" *ngIf="c.nameCategory.invalid && (c.nameCategory.dirty || c.nameCategory.touched)">
                Favor preencher este campo.
            </div>

        </div>
        <div class="form-group form-check">
            <input formControlName="subCategory" type="checkbox" class="form-check-input">
            <label class="form-check-label">Sub categoria</label>
        </div>
        <div *ngIf="infoCategory.value.subCategory">
            <app-sub-category (evento)="recebeInformacao(evento)"></app-sub-category> 
        </div>
        

        <button [disabled]="!infoCategory.valid" class="btn btn-primary">Cadastrar produto</button>  
        <div *ngIf="loading" class="spinner-border spinner" role="status"></div>

    </form>
</div>

no .ts do pai

export class CreatCategoryComponent implements OnInit {
   ...
   receberInformacao(categoria){
     //passe a informacao para o Formbuilder
   }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .