प्रतिक्रियाशील रूप - विकलांग विशेषता

Question 1

मैं disabledएक से विशेषता का उपयोग करने की कोशिश कर रहा हूँ formControl। जब मैंने इसे खाके में रखा, तो यह काम करता है:

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

लेकिन ब्राउज़र मुझे सचेत करता है:

ऐसा लगता है कि आप प्रतिक्रियाशील फ़ॉर्म निर्देश के साथ अक्षम विशेषता का उपयोग कर रहे हैं। यदि आप अपने घटक वर्ग में इस नियंत्रण को सेट करते समय सही पर अक्षम हो जाते हैं, तो अक्षम विशेषता वास्तव में आपके लिए DOM में सेट हो जाएगी। हम जाँच किए गए त्रुटियों के बाद 'परिवर्तित' से बचने के लिए इस दृष्टिकोण का उपयोग करने की सलाह देते हैं।
  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

इसलिए मैंने इसे डाल दिया FormControl, और टेम्पलेट से हटा दिया गया:

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

लेकिन यह काम नहीं करता है (यह अक्षम नहीं है input)। समस्या क्या है?

Question 2

मैं उपयोग [attr.disabled]कर रहा हूं क्योंकि मुझे अभी भी यह टेम्पलेट प्रोग्रामेटिक सक्षम () / अक्षम () से बेहतर है क्योंकि यह बेहतर आईएमओ है।

परिवर्तन

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

सेवा

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

यदि आप नए सामग्री परिवर्तन md-inputपर हैं mat-input।

Question 3

आप निम्न विधियों का उपयोग करके प्रपत्र नियंत्रण को सक्षम / अक्षम कर सकते हैं:

control.disable () या control.enable ()

यदि वह आपके लिए काम नहीं करता है तो आप एक निर्देश का उपयोग कर सकते हैं

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

}

तब आप इसे इस तरह इस्तेमाल कर सकते थे

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

यह तकनीक यहाँ वर्णित है:

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

आशा करता हूँ की ये काम करेगा

Question 4

मैंने पाया कि मुझे एक डिफ़ॉल्ट मान की आवश्यकता थी, भले ही वह काम करने के लिए एक खाली स्ट्रिंग था। तो यह:

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

... यह बनना था:

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

मेरा प्रश्न देखें (जो मुझे विश्वास नहीं है कि एक डुप्लिकेट है): फॉर्म स्टेट कंटेंट के लिए फॉर्म स्टेट ऑब्जेक्ट में 'अक्षम' पास करना काम नहीं करता है

Question 5

मेरे मामले में कोणीय 8 के साथ । मैं शर्त के आधार पर इनपुट को सक्षम / अक्षम करना चाहता था।

[attr.disabled] यहाँ मेरे लिए काम नहीं किया इसलिए मेरा समाधान है।

मैंने [attr.disabled]HTML से निकाल दिया और घटक फ़ंक्शन ने यह जाँच की:

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

Question 6

उपयोग के लिए प्रारंभिक (घटक):

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

तब उपयोग करने के बजाय (टेम्पलेट):

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

अक्षम विशेषता को हटा दें:

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

और जब आपके पास दिखाने के लिए आइटम हों, लॉन्च करें (घटक में): this.selector.enable();

Question 7

केवल वे जो प्रतिक्रियाशील रूपों का उपयोग कर रहे हैं: देशी HTML तत्वों के लिए [attr.disabled] काम करेगा लेकिन भौतिक तत्वों के लिए हमें तत्व को गतिशील रूप से अक्षम करना होगा।

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

अन्यथा यह कंसोल चेतावनी संदेश में दिखाई देगा।

Question 8

मैंने इन्हें कोणीय 7 में आज़माया। इसने सफलतापूर्वक काम किया।

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

Question 9

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

एक के लिए formcontrol अक्षम बनाता है

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

या प्रारंभिक सेट विधि।

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

Question 10

[Attr.disabled] के बजाय [अक्षम] का उपयोग करें, मेरे मामले में यह ठीक काम करता है

Question 11

html फ़ील्ड में अक्षम करें = "सही" उदाहरण जोड़ें: अक्षम करें

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

Question 12

प्रतिक्रियाशील रूपों की सुंदरता यह है कि आप किसी भी इनपुट तत्व के मूल्यों में परिवर्तन को बहुत आसानी से पकड़ सकते हैं और साथ ही साथ आप उनके मूल्यों / स्थिति को बदल सकते हैं। तो यहाँ एक और तरीका है अपनी समस्या से निपटने का enable disable।

यहाँ स्टैकब्लिट्ज़ पर पूरा समाधान है ।

Question 13

यदि आप प्रपत्र सत्यापन का उपयोग कर रहे हैं, तो मैट फ़ॉर्म फ़ील्ड को अक्षम करने की छूट दी गई है, इसलिए सुनिश्चित करें कि आपके फॉर्म फ़ील्ड में कोई सत्यापन नहीं है जैसे (validators.required), यह मेरे लिए काम करता है। पूर्व के लिए:

editUserPhone: नया फ़ॉर्मकंट्रोल ({मान: '', अक्षम: सत्य})

यह उपयोगकर्ता के फ़ोन नंबर को गैर-संपादन योग्य बनाता है।

Question 14

यह मेरा समाधान था:

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

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

Question 15

में कोणीय-9 यदि आप को निष्क्रिय करना चाहते / बटन पर क्लिक करें सक्षम यहाँ एक सरल उपाय है अगर आप प्रतिक्रियाशील रूपों का उपयोग कर रहे हैं।

घटक में एक फ़ंक्शन परिभाषित करें। फ़ाइल

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

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

इसे अपने कंपोनेंट से कॉल करें। html

जैसे

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

Question 16

जब आप नया फ़ॉर्म नियंत्रण बनाते हैं, तो अगला उपयोग करें:

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

यदि आप गतिविधि बदलना चाहते हैं, तो अगला उपयोग करें:

this.variable.enable()

या

this.variable.disable()

Question 17

अपने md-input में नाम विशेषता जोड़ें। यदि यह समस्या का समाधान नहीं करता है, तो कृपया अपना खाका पोस्ट करें

Question 18

ऐसा करने का अंतिम तरीका।

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