@功能的输入绑定

我已经创建了以下自定义按钮组件。点击这个按钮我想重置表单。但是当我执行点击操作时，出现错误：@功能的输入绑定

"ERROR TypeError: Cannot read property 'reset' of undefined"

（因为重置是功能）。

请帮我理解我的错误。

以下是我的代码自定义组件代码

@Input() clearFormData: any; 

<button *ngIf="cancelRequired" type="button" class="btn btn-warning pull-right" 
     (click)="clearFormData()" style="margin-left:0.3em">Cancel</button>

我使用上述组件这样

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-model-driven', 
    template: '<form-actions [clearFormData] ="clearForm"></form-actions>', 
    styleUrls: ['./model-driven.component.css'] 
}) 
export class ModelDrivenComponent implements OnInit { 
    clearForm() { 
    this.form.reset(); 
    }

来源

2017-08-05 hemantmali

您需要在您的自定义组件声明输出，并在另一个这样的处理：

自定义组件的HTML文件：

<button *ngIf="cancelRequired" type="button" class="btn btn-warning pull-right" 
    (click)="clearFormData()" style="margin-left:0.3em">Cancel</button>

定制元件打印稿文件：

@Output() onReset:EventEmitter<string> = new EventEmitter<string>(); 

clearFormData(){ 
    this.onReset.emit(''); 
}

您可以使用它像这样：

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, FormBuilder, Validators } from 
'@angular/forms'; 

@Component({ 
    selector: 'app-model-driven', 
    template: '<form-actions (onReset) ="clearForm($event)"></form-actions>', 
    styleUrls: ['./model-driven.component.css'] 
}) 
export class ModelDrivenComponent implements OnInit { 
    clearForm() { 
     this.form.reset(); 
    } 
}

其中这里的$事件是我们在发射功能，这是不是在你的情况下有用通过了它的价值。

我的自定义组件中可以有多个@output吗？如果我的自定义组件有多个按钮，我可以这样做吗？

@Output() onBack: EventEmitter<string> = new EventEmitter<string>(); 

    backPage() { 
    this.onBack.emit(''); 
    } 

<form-actions [cancelRequired]="true" 
    (onReset)="clearForm()" (onBack)="backPageCalled()"></form-actions>

来源

2017-08-06 06:25:39 Nour

如果我有多个按钮让我们说“编辑”，我想在我的formaction组件中使用它，我可以这样做吗？像这样？ – hemantmali

是的，你可以输出无限数量的事件发射器（但当然它就像函数的参数，你猜不应该输出超过3,4个事件）。 – Nour

您需要绑定的功能方面给母公司组件类，例如：

constructor(){ 
    this.clearForm = this.clearForm.bind(this); 
}

现在你可以通过clearForm函数在别的地方它的执行上下文将保留在你传递它的类中。

但是，对于这种操作，我建议宁愿使用子组件中的@Output。例如

(clearFormData)="this.form.reset()"

然后在组件的清除按钮

(click)="this.clearFormData.emit()"

来源

2017-08-05 21:01:46 Toxicable

@功能的输入绑定

回答

相关问题