如何在子组件中使用禁用的属性以及如何动态传递函数?

>我确实有一个额外的组件，用于按钮使用/嵌入到包含表单的不同其他组件中。

换句话说，按钮始终相同，具有相同的样式格式等。唯一不同的是，根据附件，单击按钮时应调用一些函数。

例如，在用户登录中.html我会调用：(click)="login(inputUserName.value, inputUserPass.value)"但在user-register.html中，我会调用：(click)="register(inputUserEmail.value)"

尝试实现此概念时：

button-form.component.html：

<button mat-raised-button [disabled]="!form.valid" [color]="'primary'">
<span>{{buttonText}}</span>
</button>

button-form.component.ts：

import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-button-form',
templateUrl: './button-form.component.html'
})
export class ButtonFormComponent implements OnInit {
@Input() buttonText: string;
constructor() { }
ngOnInit() {
}
}

用户登录.html：

<form #form="ngForm">
....
<app-form-button [buttonText]="TextToShowOnButton"></app-form-button>
....
</form>

我面临两个问题：

关于我得到ERROR TypeError: Cannot read property 'valid' of undefined的disabled财产。此错误是有道理的，因为属性form未在button-form.component.ts中定义，但形式以<form #form="ngForm">的形式存在于login.html中。我尝试在属性绑定中使用插值，但它没有帮助或我没有正确使用它。
我无法管理如何将函数动态传递给按钮取决于形式和过程。

我一直在寻找，但找不到解决方案...

好吧，您需要将表单传递给按钮，因为按钮是一个孤立的组件，并且对其周围环境一无所知。有关按钮行为的任何内容都应通过其inputs传递：

所以：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-button-form',
templateUrl: './button-form.component.html'
})
export class ButtonFormComponent implements OnInit {
@Input() buttonText: string;
@Input() form: NgForm;
@Output() click: EventEmitter<Event> = new EventEmitter();
constructor() { }
ngOnInit() {
}
onClick(event: Event): void {
this.click.emit(event);
}
}

现在，在模板中：

<button mat-raised-button [disabled]="!form.valid" [color]="'primary'" (click)="onClick($event)">
<span>{{buttonText}}</span>
</button>

并且，在您想要使用它的形式中：

<form #form="ngForm">
....
<app-form-button [form]="form" [buttonText]="TextToShowOnButton" (click)="register(...)"></app-form-button>
....
</form>

基本上，您为窗体添加一个新输入，以及一个@Output来传递按钮的click事件。

希望这对您有所帮助。

你可以修改你的button-form.component接受另一个输入属性@Input() isValid: boolean，用<app-form-button [isValid]="form.valid" [buttonText]="TextToShowOnButton"></app-form-button>从你的父组件传递它，然后在你的HTML中使用它

<button mat-raised-button [disabled]="!isValid" [color]="'primary'">
<span>{{buttonText}}</span>
</button>

我无法管理如何将函数动态传递给按钮取决于形式和过程。

尽管可以，但不应传递函数。应使用 Output 事件发射器并将其注册到主机管理器组件中。

<form #form="ngForm">
....
<app-form-button (onSomething)="foo($event)"...></app-form-button>
....
</form>

你可以这样简单地做到这一点：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-button-form',
templateUrl: './button-form.component.html'
})
export class ButtonFormComponent implements OnInit {
@Input() buttonText: string;
@Input() disabled: boolean;
@Output() buttonClicked: EventEmitter<any> = new EventEmitter();
constructor() { }
ngOnInit() {
}
}
<form #form="ngForm">
....
<app-form-button [buttonText]="TextToShowOnButton" [disabled]="!form.valid" 
(buttonClicked)="myFunction"></app-form-button>

通过这种方式，您不仅可以轻松实现这一点，而且还可以通过将其抽象出来使按钮组件完全独立(因为让按钮组件本身验证表单值将重新分配它仅在表单位置使用，点击事件也是如此)

相关内容

最新更新

热门标签：