Question

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

虽然正确显示了子组件中的记录，但是所选/输入的数据始终返回null。

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

a = list(set(a))

html：

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() {}
}

Parent.component.ts

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

Parent.html

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
}

Answer 1

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

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

1 个答案: