Question

This my html code:

<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>

This onContinue() method:

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

What I want is to enable or disable data-wizard-action="next" from my Angular typescript code in "onContinue()" method. If my form is not valid, so I'll disable the click of next button else, I'll enable the click. The problem here, that the continue click is attached to the data-wizard-action="next" attribute.

Answer 1

使用 * 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>

Answer 2

您可以像这样使用“Angularify”

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

和

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

Answer 3

没有更严格的方法来禁用链接按钮。我认为你使用css来禁用链接按钮条件，然后阻止点击链接按钮。

尝试使用

<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"
    }
  }
}

启用或停用其网站停用的html <a> options from typescript method

3 个答案: