In here I am passing some data from parent to child component to build a dynamic form.

This is my parent component html

<app-child-com  *ngIf="info.length>0" #FormFieldValues [info]="info"
                                                [provider] = "provider"></app-child-com>

This is my parent component.ts file

@ViewChild('FormFieldValues', {static: false}) formConfigValues: ChildComComponent;
setInfo(){
    this.service.getDetails().subscribe(res => {
     this.info = res;
    
    }, err => {
      console.log(err);
    });
  }

I am trying access the pass data from child to parent component.

saveDetails(){
  console.log(this.formConfigValues.Id);
}

This is my child component.ts

ngOnChanges(changes: SimpleChanges): void {
    if (this.info.length > 0 || this.info !== undefined) {    
      this.createForm();
    }
  }

private createForm() {
    const group = {};
    this.info.forEach(field => {
     if (field.type === 'text') {
        group[field.name] = new FormControl('', Validators.required);
        if (group[field.name] === 'id') {
          if (this.configFieldForm.get('id').value != null || this.configFieldForm.get('id').value != undefined) {
            this.Id = this.configFieldForm.get('id').value;
            console.log(this.Id);       
          }
        }
        if (group[field.name] === 'key') {
          if (this.configFieldForm.get('key').value != null || this.configFieldForm.get('key').value != undefined) {
            this.Key = this.configFieldForm.get('key').value;
            console.log(this.Key);
          }
        }
      }

    });
    this.configFieldForm = new FormGroup(group);
  }

This is my child component html file

<form [formGroup]="configFieldForm" >
  <div [isOpen]="isLiveOpen" [isDisabled]="isLiveDisabled" >    
    <ng-container *ngFor="let field of info">
      <div >
        <div >
          <ng-template [ngIf]="field.type === 'heading'">
            <div >
              <h6>{{field.label}}</h6>
            </div>
          </ng-template>
          <ng-template [ngIf]="field.type === 'text'">
            <div >
              <div >
                <label >{{field.label}}
                  <ng-template [ngIf]="field.required === true">
                    <span >*</span>
                  </ng-template>
                </label>
              </div>
              <div >
                <div >
                  <input type="text"  placeholder="{{field.label}}"
                    formControlName="{{field.name}}">
                </div>
              </div>
            </div>
          </ng-template>              
        </div>
      </div>
    </ng-container>
  </div>
</form>

But I cannot access this value in parent conponent console.log(this.formConfigValues.Id) How toget the value user type in text box in child component and pass it to parent component. Currently It's coming as undefined.

CodePudding user response：

You can pass the parentForm via @Input then assign the formGroup

In child components ngOnInit you can add this.parentForm.addControl('childGroup', myGroup)

Parent-child form combination playground: stackblitz playground

CodePudding user response：

console.log('Name:'   this.userForm.get('name').value);
console.log('Age:'   this.userForm.get('age').value);
console.log('City:'   this.userForm.get('city').value);
console.log('Country:'   this.userForm.get('country').value);