从<a>打字稿方法启用或禁用 html 选项

Question

这是我的html代码：

<a href="#" id="continueId" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
      <span>
        <span (click)="onContinue()">
          continue
        </span>
        <i class="la la-arrow-right"> </i>
      </span>
    </a>

这个oncontinue((方法：

onContinue(){
  if (!this.testForm.valid) {
    //here where I want to enable or disable data-wizard-action="next"
  }
}

我想要的是从" Oncontinue(("方法中的Angular打字码启用或禁用Data-wizard-action =" next"。如果我的表格不有效，所以我会禁用单击"下一步"按钮，我将启用单击。这里的问题是，继续点击附加到data-wizard-action =" next"属性。

Answer 1

您可以像这样使用" Angularify"

<div .. [attr.data-wizard-action]="next">

和

  onContinue(){
    this.next=!this.next
  ...

Answer 2

禁用链接按钮不再严格。我认为您使用CSS禁用链接按钮Reparessyaly，然后防止单击链接按钮。

尝试使用

<a (click)="onContinue($event)" href="javascript:void(0)" id="continueId" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next" [ngClass]="{'disabled-anchor': 'yourCondition'}">
    <span>
        <span>
          continue
        </span>
    <i class="la la-arrow-right"> </i>
    </span>
</a>

CSS

.disabled-anchor {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;    
  text-decoration: none;
  color: black;
}

组件

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
  onContinue(event: any) {
    event.preventDefault();
    event.stopPropagation();
    if (!this.testForm.valid) {
      //here where I want to enable or disable data-wizard-action="next"
    }
  }
}

Answer 3

使用*ngif 显示或隐藏HTML元素。

<div *ngIf="this.testForm.valid; then continueIdWith; else continueIdWithout"></div>
<ng-template #continueIdWith">
        <a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
</ng-template>
<ng-template #continueIdWithout">   
        <a  href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon">
</ng-template>