wake-up-neo.com

MatInput-Element kann nicht mit [formControlName] deaktiviert werden

Ich verwende matInput und mat-form-field (@ angle/material) in einer Winkelkomponente, und ich kann die matInput nicht deaktivieren.

Ein Arbeitsbeispiel ist hier zu sehen.

Es scheint wahrscheinlich, dass mir etwas offensichtlich fehlt, aber für mein Leben kann ich nicht herausfinden, was. Ist das ein Fehler?

Wenn ich [formControlName] aus der CustomFormInputComponent entferne, kann ich die matInput erfolgreich deaktivieren.

CustomFormInputComponent:

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-input',
  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
    </mat-form-field>
  `,
})
export class CustomFormInputComponent  {
  @Input() form: FormGroup;
  @Input() formControlName: string = 'name';
  @Input() disabled = false;
}

AppComponent:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <p>At least one of these inputs should be disabled, but none are :(</p>

    <app-custom-form-input [form]="form" [disabled]='true'></app-custom-form-input>

    <app-custom-form-input [form]="form" [disabled]="'disabled'"></app-custom-form-input>
  `,
})
export class AppComponent  {
  public form: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ''
    })
  }
}

Alle Erkenntnisse werden sehr geschätzt!

Antworten

Weitere Informationen zu Davids Antwort: Angular aktualisiert den DOM-Status basierend auf dem deaktivierten Status eines reaktiven Formularsteuerelements. Was ich denke, passiert: eckig rendert die CustomFormInputComponent vor der AppComponent und rendert die Komponente als deaktiviert. Dann wird die AppComponent gerendert und die form mit aktiviertem name-Steuerelement erstellt. Angular wird dann deaktiviert und das DOM-Eingangselement wird deaktiviert (das Verhalten ist wie beabsichtigt).

5
John

Wenn Sie eine FormGroup verwenden, sollten Sie das Formular in der HTML-Vorlage nicht deaktivieren. Es funktioniert nicht, wenn Sie versuchen, in HTML zusammen mit FormControl zu deaktivieren. Stattdessen sollte dies innerhalb der FormGroup erfolgen. Versuche dies:

  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName">
    </mat-form-field>
  `

und:

ngOnInit() {
    this.form = this.fb.group({
        name: new FormControl({ value: '', disabled: this.disabled })
    });
}

Auch ... keine große Sache, aber ... Sie sollten wirklich tun:

public form: FormGroup;

anstatt:

public form: any;

Vergiss auch den Import nicht

import { FormGroup, FormControl } from '@angular/forms';

Übrigens, der Name innerhalb der Formulargruppendeklaration sollte mit dem übereinstimmen, was Sie im HTML festgelegt haben.

<input formControlName="myInputName">

und

this.form = this.fb.group({
    myInputName....
});
11

Ich hatte das gleiche Problem und habe es mit der * ngIf-Direktive gelöst. Wenn die Eingabe deaktiviert werden soll, deaktivieren Sie sie, entfernen Sie die Formularbindung und geben Sie den Wert manuell ein. Wenn dies nicht der Fall ist, verwenden Sie Ihr formControl so wie es ist.

Dies ist deine Vorlage:

<mat-form-field [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
</mat-form-field>

ändere es mit:

<mat-form-field *ngIf="disabled">
  <input matInput placeholder='Name' [value]="form.formControlName" disabled='true'>
</mat-form-field>
<mat-form-field *ngIf="!disabled" [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName">
</mat-form-field>
1
boyukbas

-> Ausgabe versuchen Sie dies.

HTML-Datei

   <form name="fg" [formGroup]="fg" >
        <mat-form-field >
                  <input matInput placeholder="Email" formControlName="email">
           </mat-form-field>
    </form>

.ts Datei importiere dies: import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private _formBuilder: FormBuilder) { }



   this.fg= this._formBuilder.group({
        email :[
            {
              value : '[email protected]',
              disabled: true
            },
Validators.required
        ],
1
Vijay Prajapati

Wenn Sie Material verwenden, können Sie hinzufügen

<mat-form-field [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName" readOnly>
</mat-form-field>
0
N_B

Wenn Sie FormGroup verwenden, müssen Sie mit deaktivierter Option die FormGroup/FormControl erstellen:

name: new FormControl({ value: '', disabled: this.disabled })

Wenn Sie jedoch deaktivieren/aktivieren möchten, können Sie dies in Ihrem HTML-Code verwenden:

<input type="text" formControlName="name" [attr.disabled]="isDisabled == true ? true : null" />
0
juanjinario