get 'Undefined' when using @ViewChildren Angular

Question

I am using the decorator @ViewChildren to send a data form from the child component to the parent component.

This is my parent component.ts:

@ViewChildren('child') generalDataComponent : GeneraldataInfoComponent;
 saveAndGoForUpload() {console.log(this.generalDataComponent.generalDataForm.value)}

in my parent component.html :

 <app-generaldata-info  #child></app-generaldata-info>

And this is my child component.ts :

generalDataForm = new FormGroup({
occurenceDate: new FormControl('', Validators.required),
mainCause: new FormControl('', Validators.required),
ageBuilding: new FormControl('', Validators.required)
})

This is my child component.html :

  <form class="k-form k-form-inline" style="padding-top:4px; " [formGroup]="generalDataForm">

<div class="row">
  <div class="col-md-4 no-padding-left">
    <div style="padding-top: 10px;">
      <span style="font-size: small;">date
      </span>
      <kendo-datepicker [max]="max" formControlName="occurenceDate" [format]="'dd/MM/y'"
        placeholder="DD/MM/YYYY"></kendo-datepicker>
    </div>
  </div>
  <div class="col-md-4" style="padding-top: 10px;">
    <span style="font-size: small ;">age
    </span>
    <div class="row" style="padding-top: 11px; padding-left: 15px;">
      <input type="radio" id="inftwoyears" value="inftwoyears" [formControlName]="'ageBuilding'"
        kendoRadioButton />
      <label class="k-checkbox-label" for="inftwoyears"
        style="padding-left: 10px; padding-right: 10px;">2</label>

      <input type="radio" id="suptwoyears" value="suptwoyears" [formControlName]="'ageBuilding'"
        kendoRadioButton />
      <label class="k-checkbox-label" for="suptwoyears"
        style="padding-left: 10px;">5</label>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-4 no-padding-left">
    <span>cause </span>
  </div>
</div>
<div class="row">
  <div class="col-md-4 no-padding-left">

    <kendo-combobox [data]="mainCauselist" class="form-control" formControlName="mainCause"
    >
    </kendo-combobox>
  </div>
</div>

I am getting the error cannot read property value of undefined. But when I write console.log(this.generalDataComponent) it gives me in the console :

I add it ! But they are not related to my problem ! my problem is in the @viewChildren decorator — hiba nebli, Jan 15 '21 at 11:21
the component.ts, not the template. and its related. until ngAfterViewInit the child-component is undefined. — enno.void, Jan 15 '21 at 11:22
I don't have other code in my component.ts ! That's all what I have — hiba nebli, Jan 15 '21 at 11:25
What angular version are you using ? and do you have multiple app-generaldata-info compoenents in your parent comp ? if no did you try working with viewChild() ? — Abdelmlak Dhif, Jan 15 '21 at 11:45

get 'Undefined' when using @ViewChildren Angular

0 Answers0