Включить или отключить опции html <a>из метода машинописного текста - PullRequest
Новая
       31

Включить или отключить опции html <a>из метода машинописного текста

0 голосов
/ 27 апреля 2018

Это мой 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"
  }
}

Я хочу включить или отключить data-wizard-action = "next" из моего машинописного кода Angular в методе "onContinue ()". Если моя форма недействительна, поэтому я отключу нажатие следующей кнопки, в противном случае я включу нажатие. Проблема здесь в том, что нажатие кнопки «Продолжить» прикреплено к атрибуту data-wizard-action = "next".

Ответы [ 3 ]

0 голосов
/ 27 апреля 2018

Вы можете использовать «Angularify», как это 

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

и 

  onContinue(){
    this.next=!this.next
  ...
0 голосов
/ 27 апреля 2018

Нет более строгого способа отключения кнопки ссылки. Я думаю, что вы используете 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"
    }
  }
}
0 голосов
/ 27 апреля 2018

Используйте * 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>
...