Question

我有一个父组件和一个子组件，我需要将formGroup从我的子组件传递到我的父组件。

我这样尝试过：

子组件：

@Output() formGroup = new EventEmitter<Categoria>();

我的构造函数/创建formGroup函数：

constructor() {this.formGroup = createFormGroup()}

let createFormGroup = (dataItem?: CategoriaIcone) => {
    if (dataItem) {
        return new FormGroup({
        'NomeImagem': new FormControl(dataItem.NomeImagem), //nome da imagem
        'UrlImagemIcone': new FormControl(dataItem.UrlImagemIcone),
        'Imagem': new FormControl(''),
        'TypeImage': new FormControl('')
        });
    } else {
        return new FormGroup({
        'NomeImagem': new FormControl(''),
        'UrlImagemIcone': new FormControl(''),
        'Imagem': new FormControl(''),
        'TypeImage': new FormControl('')
        });
    }
}

但是我在构造函数中遇到错误：

类型'FormGroup'缺少类型'EventEmitter'中的以下属性：__isAsync，发出，订阅，观察者以及另外17个。

Answer 1

您可以将Suresh方法与view child一起使用，它将像魅力一样工作。示例：

save(){
const formvalues = this.childcomp.getFormGroup();
// do somethimg with the form
}

但是，您的问题主要是，您要将表单和发射器设置在同一变量上，您需要做的是：

1-设置发射器

@Output() emitter = new EventEmitter<Categoria>();

2-例如当您单击保存时发出表格

clicSave(){
this.emmitter.emit(this.formGroup)
}

Answer 2

在父组件中，您可以使用来访问子组件

@ViewChild('childComp') childcomp: ChildComponent;

此子组件需要公开一个getter方法，该方法将返回formgroup实例。

父组件：

Inside ngAfterViewInit(){
   this.childcomp.getFormGroup();
}

在Angular 8中，可以使用静态属性访问ngOnInit，ngAfterViewInit中的ViewChild元素。

Answer 3

Meliondas，我认为您对@Output感到有些困惑。 @Output用于“模拟”事件。例如单击div时，将发生事件“ click”，并且作为参数是一个对象。在应用程序中的代码中：

<div (click)="myfunction($event)">click</div> 
//in .ts
myfunction(event)
{
     console.log(event)
}

好吧，当我们有一个子组件时，我们也做同样的事情。在父母中

<app-child (myOutput)="myfunction($event)">click</app-child> 
//in .ts
myfunction(event)
{
     console.log(event)
}

还有你的孩子

@Output() myOutput= new EventEmitter<any>();
data={name:'name',surname:'surname'}
this.myOutput.emit(data)

所以，在您的父母中，“事件”是您发出的对象

如何将formGroup传递给父元素？

3 个答案: