Eckig (4): deaktivieren Sie das gesamte Formular (group) anstatt jeden Eingang separat?

Ist es möglich, deaktivieren Sie das gesamte Formular (Gruppe) im Winkel zu tun, anstatt es für jeden Eingang separat?

Etwas wie <input [disabled]="formNotValid"/> aber für eine <form> oder eine <div ngModelGroup..>?

InformationsquelleAutor Deniss M. | 2017-09-17



3 Replies
  1. 7

    Wenn Sie ReactiveForms schreiben Sie einfach

    form: formGroup;
    
    this.form.disable();
    

    Im Falle von ngForm Sie können schreiben, wie‘ erstellt plunker

     <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>
    
    <button (click)="disable(f)">Disable form</button>
    
    
    
     disable(f) {
        f.form.disable()
      }
    
    • Ich benutze Vorlagen Formulare in diesem Fall.
  2. 2

    Hier ist eine Lösung, die automatisch deaktiviert alle Formular-Elemente, wenn der submit-button geklickt wird.

    Diese Lösung gilt für template-driven Formen.

    HTML:

    <form #myForm="ngForm" (ngSubmit)="onFormSubmit( myForm )">
    
        <input type="text" name="title" [(ngModel)]="model.title" #title="ngModel">
    
        <button type="submit">
    
            <span *ngIf="!imyForm.disabled">
                Submit Form
            <span>
    
            <span *ngIf="myForm.disabled">
                Submitted
            <span>
    
        </button>
    
    </form>
    

    TS:

    public onFormSubmit( form: any): void {
        form.form.disable();
    }
    
  3. 0

    Könnte es als hack-y, aber man könnte ngClass und css anwenden einer Klasse, schaltet pointer-events für alle Eingänge innerhalb eines Containers, wenn die Bedingungen erfüllt sind.

    .disable-inputs {
      pointer-events: none;
    }
    
    <form [ngClass]="{'disable-inputs':[true/false condition]}">
       //input elements
    </form>
    

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.