Formularze reaktywne - atrybut wyłączony

Próbuję użyć disabledatrybutu z pliku formControl. Kiedy wstawię to do szablonu, działa:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

Ale przeglądarka ostrzega mnie:

Wygląda na to, że używasz atrybutu disabled z dyrektywą formularza reaktywnego. Jeśli ustawisz disabled na true podczas konfigurowania tej kontrolki w klasie komponentów, atrybut disabled zostanie faktycznie ustawiony w DOM za Ciebie. Zalecamy skorzystanie z tego podejścia, aby uniknąć błędów „zmieniono po sprawdzeniu”.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Więc umieściłem go w FormControl, i usunąłem z szablonu:

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

Ale to nie działa (nie wyłącza input). Jaki jest problem?

Używam, [attr.disabled]ponieważ nadal podoba mi się ten szablon oparty na programowym włączaniu () / wyłączaniu (), ponieważ jest lepszym IMO.

Zmiana

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

do

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Jeśli korzystasz z nowszego materiału, zmień md-inputna mat-input.

Możesz włączyć / wyłączyć formant formularza przy użyciu następujących metod:

control.disable () lub control.enable ()

Jeśli to nie zadziałało, możesz użyć dyrektywy

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

Wtedy możesz tego użyć w ten sposób

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Ta technika jest opisana tutaj:

https://netbasal.com/disiring-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Mam nadzieję, że to pomoże

W moim przypadku z Angular 8 . Chciałem włączyć / wyłączyć wejście w zależności od warunku.

[attr.disabled] nie działa dla mnie, więc oto moje rozwiązanie.

Usunąłem [attr.disabled]z HTML i w funkcji komponentu wykonałem tę kontrolę:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Odkryłem, że potrzebuję wartości domyślnej, nawet jeśli był to pusty ciąg, aby działał. Więc to:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

... musiał stać się tym:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

Zobacz moje pytanie (które nie uważam za duplikat): Przekazywanie „wyłączone” w obiekcie stanu formularza do konstruktora FormControl nie działa

Inicjalizacja (komponent) przy użyciu:

public selector = new FormControl({value: '', disabled: true});

Wtedy zamiast używać (szablon):

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Po prostu usuń atrybut wyłączony:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

A kiedy masz elementy do pokazania, uruchom (w komponencie): this.selector.enable();

Tylko ci, którzy używają formularzy reaktywnych: dla natywnych elementów HTML [attr.disabled] będzie działać, ale w przypadku elementów materialnych musimy dynamicznie wyłączyć element.

this.form.get('controlname').disable();

W przeciwnym razie pojawi się ostrzeżenie konsoli.

Wypróbowałem te w Angular 7. Udało się.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

this.form.disable()
this.form.enable()

Dla jednego formcontrol wyłącza

this.form.get('first').disable()
this.form.get('first').enable()

Lub metoda początkowego zestawu.

first: new FormControl({disabled: true}, Validators.required)

Użyj [attr.disabled] zamiast [disabled], w moim przypadku działa dobrze

dodaj disable = "true" do pola html Przykład: wyłącz

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

Piękno formularzy reaktywnych polega na tym, że możesz bardzo łatwo wychwycić zmiany wartości dowolnego elementu wejściowego, a jednocześnie możesz zmienić ich wartości / status. Oto kolejny sposób rozwiązania problemu za pomocą enable disable.

Oto kompletne rozwiązanie na stackblitz .

wyłączenie pól formularza mat jest wyłączone, jeśli używasz walidacji formularza, więc upewnij się, że twoje pole formularza nie ma żadnych walidacji, takich jak (validators.required), to zadziałało dla mnie. na przykład:

editUserPhone: new FormControl ({value: '', disabled: true})

powoduje to, że numery telefonów użytkowników nie są edytowalne.

To było moje rozwiązanie:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

w Angular-9, jeśli chcesz wyłączyć / włączyć na przycisku kliknij tutaj jest prostym rozwiązaniem, jeśli używasz formularzy reaktywnych.

zdefiniuj funkcję w pliku component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Wywołaj to ze swojego component.html

na przykład

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Kiedy tworzysz nową kontrolkę Form, użyj next:

variable: FormControl = new FormControl({value: '', disabled: true});

Jeśli chcesz zmienić aktywność, użyj dalej:

this.variable.enable() 

lub

this.variable.disable()

dodaj atrybut nazwy do swojego md-input. jeśli to nie rozwiąże problemu, prześlij swój szablon

Najlepszy sposób na zrobienie tego.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}