Angular2 disable button

前端 未结 10 1759
萌比男神i
萌比男神i 2020-12-02 10:03

I know that in angular2 I can disable a button with the [disable] attribute, for example:

相关标签:
10条回答
  • 2020-12-02 11:04

    If you are using reactive forms and want to disable some input associated with a form control, you should place this disabled logic into you code and call yourFormControl.disable() or yourFormControl.enable()

    0 讨论(0)
  • 2020-12-02 11:07

    Using ngClass to disabled the button for invalid form is not good practice in Angular2 when its providing inbuilt features to enable and disable the button if form is valid and invalid respectively without doing any extra efforts/logic.

    [disabled] will do all thing like if form is valid then it will be enabled and if form is invalid then it will be disabled automatically.

    See Example:

    <form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
    <input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
    <input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">
    

    0 讨论(0)
  • 2020-12-02 11:08

    Yes you can

    <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
             (click)="toggle(!isOn)">
             Click me!
     </div>
    

    https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

    0 讨论(0)
  • 2020-12-02 11:08
     <button [disabled]="this.model.IsConnected() == false"
                  [ngClass]="setStyles()"
                  class="action-button action-button-selected button-send"
                  (click)= "this.Send()">
              SEND
            </button>
    

    .ts code

    setStyles() 
    {
        let styles = {
    
        'action-button-disabled': this.model.IsConnected() == false  
      };
      return styles;
    }
    
    0 讨论(0)
提交回复
热议问题