Question

我创建了一个自定义按钮组件，我在其中一个模板中使用它。我希望在表单无效时使用disabled属性禁用此按钮组件。我该如何实现这一目标？我可以使用哪种Angular API？例如：在HTML中，我正在使用“app-okbutton”组件“我想在app-okbutton中使用像[禁用] =”??“这样的禁用属性参考图像https://i.stack.imgur.com/C3xdR.png

链接到我的回购以供参考 https://github.com/hemantmali21/Angular2-Demo/blob/master/src/app/okbutton/okbutton.component.ts

先谢谢。

Answer 1

@Component({
  selector: 'app-okbutton',
  template: `
  <button [disabled]="disabled"
    [type]= "type" class="btn btn-primary {{className}}" (click)="onClickEvent.emit($event)">
          Save
  </button>
  `,
  styleUrls: []
})
export class OkbuttonComponent {
  @Input() className = ''; // default value if none is passed
  @Input() type = 'button'; // default value if none is passed
  @Input() disabled = false; // default value if none is passed
  @Output() onClickEvent: EventEmitter<any> = new EventEmitter<any>();
}

然后您可以按如下方式使用它（例如使用表单）：

<form #form="ngForm" novalidate>
// form fields go here
</form>
<app-okbutton [disabled]="!form.valid"></app-okbutton>

Angular2自定义按钮

1 个答案: