Question

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

换句话说，按钮总是一样的，具有相同的样式格式等。唯一不同的是，根据门廊点击按钮时应调用的一些功能。

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

试图实现这个概念时：

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

用户-的login.html：

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

我面临两个问题：

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

我一直在寻找，但无法真正找到解决方案......

Answer 1

您可以修改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>

Answer 2

嗯，你需要将表单传递给按钮，因为按钮是一个独立的组件，并且对周围的环境一无所知。有关按钮行为的任何内容都应通过其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事件。

希望这能为你服务。

Answer 3

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

尽管你可以，但你不应该通过一项功能。你应该使用一个Output事件发射器并在hoster组件中注册它。

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

Answer 4

你可以这样做：

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>

通过这种方式，您不仅可以轻松实现这一目标，还可以通过抽象将按钮组件完全独立（因为使按钮组件验证表单值本身会使其重新使用它）仅在形式的地方，同样适用于点击事件）

如何在子组件中使用disabled属性以及如何动态传递函数？

4 个答案: