117

मैंने पहले से ही यहां से अन्य उत्तरों के उदाहरण का पालन करने की कोशिश की और मैं सफल नहीं हुआ!

मैंने एक प्रतिक्रियाशील रूप (यानी, गतिशील) बनाया और मैं किसी भी समय कुछ फ़ील्ड को अक्षम करना चाहता हूं। मेरा फॉर्म कोड:

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

मेरा html:

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

मैंने सुविधा के लिए कोड कम कर दिया। मैं चयन प्रकार के क्षेत्र को अक्षम करना चाहता हूं। मैंने निम्नलिखित करने की कोशिश की:

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

काम नहीं कर रहा! क्या किसी के पास कोई सलाह है?

angular

— रेनाटो सूजा डी ओलिवेरा
स्रोत

जब आप कुछ फॉर्मकंट्रोल को निष्क्रिय करने का प्रयास कर रहे हैं, तो चयन को कैसे अक्षम किया जा सकता है first? `:)

— AJT82

यह सिर्फ टाइपो था। मैं सिलेक्ट को डिसेबल करना चाहता हूं। क्या आप मेरी मदद कर सकते हैं?

— रेनाटो सूज़ा डे ओलिवेरा

क्या आप एक प्लंकर को पुन: उत्पन्न कर सकते हैं?

— एजेटी 82२

क्या आप पूरे चयन को अक्षम करने का प्रयास कर रहे हैं? और valueएक फॉर्मअरे नहीं है, यह एक फॉर्मकंट्रोलनाम है। यदि आप valueएक फॉर्म बनना चाहते हैं, तो आपको इसे बदलना होगा। वर्तमान में यह एक फॉर्मकंट्रोलनाम है। इसलिए यदि आप चाहते हैं कि संपूर्ण चयन क्षेत्र अक्षम हो जाए, तो बस बदल <select formArrayName="value">दें<select formControlName="value">

— AJT82

222

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

या

this.form.controls['name'].disable();

— जोचे विस
स्रोत

अगर मैं उस तरह का मान सेट करता हूं -> देश: [{value: this.address.country, अक्षम: true}] मान नहीं भरता है

— Silvio Troia

मैंने उसी तकनीक का उपयोग खेतों को निष्क्रिय करने के लिए किया है जो विश्वसनीय स्रोतों से भरे हुए थे। मेरे पास फ़ॉर्म को सक्षम / अक्षम करने के लिए एक स्विच है, और पूरे फ़ॉर्म को सक्षम करने के बाद, मैं आमतौर पर उन क्षेत्रों को ifबयानों का उपयोग करके अक्षम करता हूं । फॉर्म जमा होने के बाद, पूरे फॉर्म को एक बार फिर से निष्क्रिय कर दिया जाता है।

— retr0

72

ध्यान दें

यदि आप स्थिति के लिए एक चर का उपयोग करके एक फॉर्म बना रहे हैं और बाद में इसे बदलने की कोशिश कर रहे हैं तो यह काम नहीं करेगा, अर्थात फॉर्म नहीं बदलेगा ।

उदाहरण के लिए

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

और यदि आप चर को बदलते हैं

this.isDisabled = false;

रूप नहीं बदलेगा। आपको उपयोग करना चाहिए

this.cardForm.get ( 'संख्या') अक्षम ()।;

Btw।

मूल्य बदलने के लिए आपको पैचवैल्यू विधि का उपयोग करना चाहिए:

this.cardForm.patchValue({
    'number': '1703'
});

— दिमित्री ग्रिंको
स्रोत

22

प्रतिक्रियाशील रूपों के साथ DOM में अक्षम का उपयोग करना बुरा व्यवहार है। आप इस विकल्प को अपने में सेट कर सकते हैं FormControl, जब आप इसमें से init करते हैं

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

संपत्ति valueआवश्यक नहीं है

या आप get('control_name')सेट और सेट के साथ अपना फॉर्म कंट्रोल कर सकते हैंdisable

this.userForm.get('username').disable();

— वलोडिमिर खमिल
स्रोत

प्रतिक्रियाशील रूपों के साथ DOM में अक्षम का उपयोग करना एक बुरा अभ्यास क्यों है?

— पंपकिंटहेड

2

आपको कोणीय से चेतावनी मिलेगी।

It looks like you’re using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid ‘changed after checked’ errors

। तो विकलांगों को सीधे नियंत्रण के माध्यम से अक्षम / सक्षम करने के लिए अनुशंसित तरीका। इसके अलावा, आप इस महान विषय netbasal.com/…

— वलोडिमिर खमिल

10

मैंने अपने इनपुट ऑब्जेक्ट को एक फ़ील्ड सेट में इसके लेबल के साथ लपेटकर इसे हल किया: फ़ील्ड को बूलियन में बंधी अक्षम संपत्ति होना चाहिए

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

— फर्नांडो एम
स्रोत

1

यह जानने में बहुत समय बर्बाद हुआ कि प्रतिक्रियात्मक रूपों में नियंत्रण को कैसे निष्क्रिय किया जाए, LOL! यह काम किया .. कोई निर्देश या अतिरिक्त कोड की जरूरत है। चीयर्स ers

— नेक्सस

7

disablingFormControl preventsयह जबकि एक के रूप में उपस्थित रहने के लिए saving। आप बस इसे readonlyसंपत्ति निर्धारित कर सकते हैं।

और आप इसे इस तरह से प्राप्त कर सकते हैं:

HTML:

<select formArrayName="value" [readonly] = "disableSelect">

TS:

this.disbaleSelect = true;

यहीं मिला

— एलेक्स पो
स्रोत

2

आप form.getRawValue()विकलांग नियंत्रण मूल्यों को शामिल करने के लिए उपयोग कर सकते हैं

— मुराफ सूसली

6

यदि disabledफॉर्म इनपुट तत्वों का उपयोग करना है (जैसे कि सही उत्तर में सुझाव दिया गया है कि इनपुट को कैसे निष्क्रिय किया जाए ) तो उनके लिए सत्यापन भी अक्षम हो जाएगा, उस पर ध्यान दें!

(और अगर आप सबमिट बटन का उपयोग कर रहे हैं तो [disabled]="!form.valid"यह आपके क्षेत्र को सत्यापन से बाहर कर देगा)

— एलेक्स एफिमोव
स्रोत

1

आप उन फ़ील्ड के लिए कैसे मान्य कर सकते हैं जो शुरू में अक्षम हैं लेकिन गतिशील रूप से सेट हैं?

— नेप्च्यूनस्टेरर

5

एक अधिक सामान्य दृष्टिकोण होगा।

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

— हरबी शटिनी
स्रोत

3

यदि आप first(formcontrol) को निष्क्रिय करना चाहते हैं तो आप नीचे दिए गए कथन का उपयोग कर सकते हैं।

this.form.first.disable();

— Gampesh
स्रोत

3

यह मेरे लिए काम किया: this.form.get('first').disable({onlySelf: true});

— फोराम झावेरी
स्रोत

3

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

या फॉर्मकंट्रोल 'प्रथम'

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

आप प्रारंभिक सेट पर अक्षम या सक्षम कर सकते हैं।

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

— पु चेंगली
स्रोत

2

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

— अब्दुल्ला पारियानी
स्रोत

1

सबसे अच्छा समाधान यहाँ है:

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

समाधान की रूपरेखा (टूटी लिंक के मामले में):

(१) एक निर्देश बनाएँ

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]="condition">

(3) चूँकि निष्क्रिय इनपुट फॉर्म में नहीं दिखाते हैं। सबमिट करने पर आपको इसके बजाय निम्नलिखित का उपयोग करने की आवश्यकता हो सकती है (यदि आवश्यक हो):

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

— danday74
स्रोत

मैंने इस तरह से कोशिश की। एपीआई डेटा खींचने के बाद मैं अपने अधिकांश फॉर्मकंट्रोल दिखा रहा हूं, इसलिए अपने फॉर्मकंट्रोल को मेरे द्वारा उपयोग किए जाने वाले फॉर्म / पोर्ट को सेट करने के बाद / पैचिंग मूल्य this.form.get('FIELD_NAME').patchValue(DYNAMIC_VALUE)दिखा रहा हूं। जब यह निर्देशन करने के लिए पारित हुआ, तो यह अपरिभाषित की संपत्ति को 'अक्षम' नहीं पढ़ सकता है

— ImFarhad

0

मुझे भी यही समस्या थी, लेकिन इस .form.controls ['name'] को कॉल करना। अक्षम () ने इसे ठीक नहीं किया क्योंकि मैं अपने विचार (राऊटर का उपयोग करके पुनः लोड कर रहा था। navigate ())।

मेरे मामले में मुझे पुनः लोड करने से पहले अपना फॉर्म रीसेट करना पड़ा:

this.form = अपरिभाषित; this.router.navigate ([पथ]);

— ताई ट्रोंग
स्रोत

0

setTimeout(() => { emailGroup.disable(); });

— जुडसन टेरेल
स्रोत

0

आप सभी फ़ॉर्म नियंत्रण को सक्षम / अक्षम करने के लिए एक फ़ंक्शन की घोषणा कर सकते हैं:

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

और इसे इस तरह से उपयोग करें

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

— डुओंग ले
स्रोत

-2

किसी फ़ील्ड को अक्षम करने और प्रतिक्रियाशील रूप कोणीय 2 + के सक्षम करने के लिए

1. निष्क्रिय करना

इनपुट में [attr.disabled] = "सही" जोड़ें ।

<input class="form-control" name="Firstname" formControlName="firstname" [attr.disabled]="true">

सक्षम करने के लिए

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

पूरे फ़ॉर्म को सक्षम करें

this.formname.enable();

अकेले विशेष क्षेत्र को सक्षम करें

this.formname.controls.firstname.enable();

अक्षम के लिए समान, सक्षम करें () को अक्षम करें () के साथ बदलें।

यह ठीक काम करता है। प्रश्नों के लिए टिप्पणी करें।

— श्रीनिवासन एन
स्रोत

प्रतिक्रियाशील रूप में इनपुट फ़ील्ड अक्षम करें

किसी फ़ील्ड को अक्षम करने और प्रतिक्रियाशील रूप कोणीय 2 + के सक्षम करने के लिए

1. निष्क्रिय करना

सक्षम करने के लिए