Reaktif formlar - devre dışı bırakılan özellik

Ben kullanmaya çalışıyorum disabledbir gelen niteliği formControl. Şablona koyduğumda çalışıyor:

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

Ancak tarayıcı beni uyarıyor:

Görünüşe göre devre dışı bırakılmış özniteliği reaktif form yönergesi ile kullanıyorsunuz. Bu kontrolü bileşen sınıfınızda kurduğunuzda devre dışı seçeneğini true olarak ayarlarsanız, devre dışı bırakılan özellik aslında sizin için DOM'da ayarlanacaktır. 'Kontrol edildikten sonra değiştirilen' hatalardan kaçınmak için bu yaklaşımı kullanmanızı öneririz.

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

Ben de onu FormControlşablona ekledim ve şablondan sildim:

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);
}

Ancak çalışmıyor (devre dışı bırakmıyor input). Sorun nedir?

Kullanıyorum [attr.disabled]çünkü bu şablonu hala daha üstün bir IMO olduğu için programlı etkinleştirme () / devre dışı bırakma () 'dan daha çok seviyorum.

Değişiklik

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

-e

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

Eğer yeni malzeme değişikliği vardır md-inputiçin mat-input.

Aşağıdaki yöntemleri kullanarak bir form denetimini etkinleştirebilir / devre dışı bırakabilirsiniz:

control.disable () veya control.enable ()

Bu sizin için işe yaramadıysa, bir yönerge kullanabilirsiniz

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 ) {
  }

}

O zaman bunu böyle kullanabilirsin

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

Bu teknik burada açıklanmaktadır:

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

Umarım yardımcı olur

Angular 8 ile benim durumumda . Koşula bağlı olarak girişi etkinleştirmek / devre dışı bırakmak istedim.

[attr.disabled] benim için çalışmadı, bu yüzden işte benim çözümüm.

[attr.disabled]HTML'den kaldırdım ve bileşen işlevinde şu kontrolü gerçekleştirdim:

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

Çalışması için boş bir dize olsa bile varsayılan bir değere sahip olmam gerektiğini fark ettim. Yani bu:

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

... şu hale gelmeliydi:

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

Soruma bakın (yinelenen olduğuna inanmıyorum): Form durumu nesnesinde 'devre dışı bırakıldı' FormControl kurucusuna aktarılmıyor

Kullanarak başlatma (bileşen):

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

Sonra (şablon) kullanmak yerine:

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

Devre dışı bırakılan özelliği kaldırmanız yeterlidir:

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

Ve gösterilecek öğeleriniz olduğunda, başlatın (bileşende): this.selector.enable();

Yalnızca reaktif formları kullananlar: Yerel HTML öğeleri için [attr.disabled] çalışacaktır, ancak malzeme öğeleri için öğeyi dinamik olarak devre dışı bırakmamız gerekir.

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

Aksi takdirde konsol uyarı mesajında ​​gösterilecektir.

Bunları açısal 7'de denedim. Başarıyla çalıştı.

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

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

Bir form kontrolü devre dışı bırakır

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

Veya ilk ayar yöntemi.

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

[Attr.disabled] yerine [devre dışı] kullanın, benim durumumda iyi çalışıyor

html alanına disable = "true" ekleyin Örnek: devre dışı bırak

<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>

Reaktif formların güzelliği, herhangi bir girdi elemanının değer değişikliklerini çok kolay bir şekilde yakalayabilmeniz ve aynı zamanda değerlerini / durumlarını değiştirebilmenizdir. İşte probleminizi kullanarak çözmenin başka bir yolu enable disable.

İşte stackblitz'deki eksiksiz çözüm .

Form doğrulama kullanıyorsanız mat form alanlarının devre dışı bırakılması muaftır, bu nedenle form alanınızda (validators.required) gibi doğrulama olmadığından emin olun, bu benim için çalıştı. örneğin:

editUserPhone: yeni FormControl ({değer: '', devre dışı: true})

bu, kullanıcının telefon numaralarının düzenlenemez olmasını sağlar.

Bu benim çözümümdü:

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

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

içinde açısal-9 Eğer devre dışı istiyorsanız / burada butonuna tıklayın etkinleştirmek Eğer reaktif formları kullanarak eğer basit bir çözümdür.

component.ts dosyasında bir işlev tanımlayın

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

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

Component.html'nizden arayın

Örneğin

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

Yeni Form denetimi oluşturduğunuzda, sonrakini kullanın:

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

Aktiviteyi değiştirmek istiyorsanız, sonrakini kullanın:

this.variable.enable() 

veya

this.variable.disable()

md-girişinize isim niteliği ekleyin. sorunu çözmezse lütfen şablonunuzu gönderin

Bunu yapmanın en iyi yolu.

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.
  })
}