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.