时间戳

首页 > 解决方案 > 子组件以父形式 angular 4/5 返回 null

angular - 子组件以父形式 angular 4/5 返回 null

问题描述

我有这个可重用的组件，它只会让用户选择一些记录。

当子组件中的记录正确显示时，选择/输入的数据总是返回 null。

这是两者的精简结构（出于空间目的删除了一些元素）

import { Component, OnInit } from '@angular/core';
import {GlobalData} from '../../../globals/global-data';
import { ControlContainer, FormGroupName  } from '@angular/forms';

@Component({
  selector: 'app-hr',
  templateUrl: './hr.component.html',
  styleUrls: ['./hr.component.scss'],
  viewProviders: [
    { provide: ControlContainer, useExisting: FormGroupName  }
  ]
})

export class HrComponent implements OnInit {

   constructor() {}
}

的HTML：

<select formControlName="rec">
  <option value="1">Lower</option>
  <option value="2">Higher</option>
</select>

父组件.ts

this.rForm = fb.group({      
  'hr': fb.group ({
        'rec' : [null, []],

      }),      
  'reason':[null,[Validators.required]]
});

processForm(post){
    console.log(post.hr); //===================>returns null for all child elements tho selected
}

父.html

 <form [formGroup]="rForm" (ngSubmit)="processForm(rForm.value)">

  <div formGroupName="hr">
  <app-hr></app-hr>
  </div>

  <input type="text" formControlName="reason"/>

 </form>

标签： angular

解决方案

不确定我是否理解正确，但我认为您应该在子组件中使用 Output() ，并发出选定的值：this.example.emit(value);，然后在父组件中收听？

推荐阅读