প্রতিক্রিয়াশীল আকারে ইনপুট ক্ষেত্রগুলি অক্ষম করুন

Question

আমি ইতিমধ্যে এখান থেকে অন্যান্য উত্তরগুলির উদাহরণ অনুসরণ করার চেষ্টা করেছি এবং আমি সফল হই নি!

আমি একটি প্রতিক্রিয়াশীল ফর্ম তৈরি করেছি (অর্থাত্ গতিশীল) এবং আমি যে কোনও সময় কিছু ক্ষেত্র অক্ষম করতে চাই। আমার ফর্ম কোড:

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: ['']
}));

আমার এইচটিএমএল:

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

কাজ করছে না! যে কেউ একটি প্রস্তাব আছে?

Comments

আপনি যখন কিছু ফর্মকন্ট্রোল নামক অক্ষম করার চেষ্টা করছেন তখন কীভাবে নির্বাচনকে অক্ষম করা যেতে পারে first? `:)

— এজেটি 82২

এটা ঠিক টাইপ ছিল। আমি নির্বাচনটি অক্ষম করতে চাই। আপনি কি আমাকে সাহায্য করতে পারেন?

— রেনাতো সৌজা ডি অলিভিরা

আপনি একটি প্লাঙ্কার পুনরুত্পাদন করতে পারেন?

— AJT82

আপনি কি পুরো নির্বাচনটি অক্ষম করার চেষ্টা করছেন? এবং valueএটি কোনও ফর্মআরাই নয়, এটি একটি ফর্মকন্ট্রোলনাম। আপনি যদি valueফর্মআরে হতে চান তবে আপনাকে এটি পরিবর্তন করতে হবে। বর্তমানে এটি একটি ফর্ম কন্ট্রোলনাম। সুতরাং আপনি যদি পুরো নির্বাচিত ক্ষেত্রটি অক্ষম করতে চান তবে স্রেফ পরিবর্তন <select formArrayName="value">করুন<select formControlName="value">

— এজেটি 82 82

Answer 1

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

অথবা

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

Comments

যদি আমি এর মতো একটি মান সেট করে -> দেশ: [{মান: this.address.country, অক্ষম: সত্য}] মান পূরণ হয় না

— সিলভিও ট্রোয়া

আমি সেই ক্ষেত্রগুলি অক্ষম করতে একই কৌশলটি ব্যবহার করেছি যা বিশ্বস্ত উত্স থেকে স্বয়ংক্রিয়ভাবে ভরা ছিল। ফর্মটি সক্ষম / অক্ষম করার জন্য আমার একটি সুইচ রয়েছে এবং পুরো ফর্মটি সক্ষম করার পরে আমি সাধারণত ifবিবৃতি ব্যবহার করে সেই ক্ষেত্রগুলিকে অক্ষম করি । ফর্ম জমা দেওয়ার পরে, পুরো ফর্মটি আবার একবার অক্ষম করা হয়েছে।

— 16:30

Answer 2

মনোযোগ দিন

আপনি যদি শর্তের জন্য ভেরিয়েবল ব্যবহার করে একটি ফর্ম তৈরি করে থাকেন এবং পরে এটি পরিবর্তন করার চেষ্টা করছেন তবে এটি কাজ করবে না, অর্থাত্ ফর্মটি পরিবর্তন হবে না ।

উদাহরণ স্বরূপ

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

Answer 3

প্রতিক্রিয়াশীল ফর্ম সহ কোনও ডিওএম এ অক্ষম ব্যবহার করা খারাপ অভ্যাস। আপনি এই বিকল্পটি আপনার মধ্যে সেট করতে পারেন FormControl, যখন আপনি সূচনা করেন

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

Comments

প্রতিক্রিয়াশীল ফর্মগুলির সাথে DOM এ অক্ষম ব্যবহার করা কেন খারাপ অভ্যাস?

— কুমড়োহেহেড

আপনি কৌণিক থেকে একটি সতর্কতা পাবেন। 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। সুতরাং নিয়ন্ত্রণগুলির মাধ্যমে সরাসরি অক্ষম / সক্ষম রাষ্ট্র পরিবর্তন করার প্রস্তাবিত উপায়। এছাড়াও, আপনি এই দুর্দান্ত বিষয়টি নেটবাসাল.com

— ভোলডিমায়ার খুমিল

Answer 4

আমি আমার ইনপুট অবজেক্টটিকে ফিল্ড সেটে তার লেবেলের সাথে জড়িয়ে রেখে সমাধান করেছি: ফিল্ডসেটটিতে অক্ষম সম্পত্তিটি বুলিয়ানকে আবদ্ধ করা উচিত

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

Comments

প্রতিক্রিয়াশীল ফর্মগুলিতে কীভাবে নিয়ন্ত্রণগুলি অক্ষম করতে হয় তা নির্ধারণ করতে অনেক সময় নষ্ট করেন, LOL! এটি কাজ করেছে .. কোনও নির্দেশিকা বা অতিরিক্ত কোডের প্রয়োজন নেই। চিয়ার্স 🍻

— নেক্সাস

Answer 5

disablingFormControl preventsএটা যখন একটি ফর্ম উপস্থিত হতে saving। আপনি এটি readonlyসম্পত্তি সেট করতে পারেন ।

এবং আপনি এটি এইভাবে অর্জন করতে পারেন:

এইচটিএমএল:

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

টিএস:

this.disbaleSelect = true;

এটি এখানে পাওয়া গেছে

Comments

আপনি form.getRawValue()অক্ষম নিয়ন্ত্রণের মানগুলি অন্তর্ভুক্ত করতে ব্যবহার করতে পারেন

— মুরহাফ সসুলি

Answer 6

যদি disabledফর্ম ইনপুট উপাদানগুলি ব্যবহার করতে হয় (যেমন সঠিক উত্তরটিতে প্রস্তাব দেওয়া হয় কীভাবে ইনপুট অক্ষম করতে হয় ) তাদের জন্য বৈধতাও অক্ষম হয়ে যাবে, সেদিকে মনোযোগ দিন!

(এবং আপনি যদি সাবমিট বাটন ব্যবহার করেন তবে [disabled]="!form.valid"এটি আপনার ক্ষেত্রকে বৈধতা থেকে বাদ দেবে)

Comments

প্রাথমিকভাবে অক্ষম থাকলেও গতিশীলভাবে সেট করা ক্ষেত্রগুলির জন্য আপনি কীভাবে বৈধতা দিতে পারেন?

— নেপচুনঅয়েস্টার

Answer 7

আরও সাধারণ পন্থা হবে।

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

Answer 8

আপনি যদি first(formcontrol) অক্ষম করতে চান তবে নীচের বিবৃতিটি ব্যবহার করতে পারেন।

this.form.first.disable();

Answer 9

এটি আমার পক্ষে কাজ করেছে: this.form.get('first').disable({onlySelf: true});

Answer 10

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

অথবা ফর্মকন্ট্রোল 'প্রথম'

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

আপনি প্রাথমিক সেটটিতে অক্ষম বা সক্ষম করতে পারেন।

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

Answer 11

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

Answer 12

সেরা সমাধানটি এখানে:

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

সমাধানের রূপরেখা (ভাঙা লিঙ্কের ক্ষেত্রে):

(1) একটি নির্দেশিকা তৈরি করুন

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

(2) এটি যেমন ব্যবহার করুন

<input [formControl]="formControl" [disableControl]="condition">

(3) যেহেতু অক্ষম ইনপুটগুলি ফর্মটিতে প্রদর্শিত না হয় submit

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

Comments

আমি এইভাবে চেষ্টা করেছি। আমি এপিআই ডেটা টানার পরে আমার বেশিরভাগ ফর্মকন্ট্রোলগুলি দেখছি, তাই আমার ফর্মকন্ট্রোলটিতে মান সেট / প্যাচিংয়ের পরে আমি ফর্মকন্ট্রোলটি this.form.get('FIELD_NAME').patchValue(DYNAMIC_VALUE)দেখছি। এটি যখন নির্দেশের দিকে চলে যায় তখন এটি দেখায় যে সম্পত্তি

— অপরিজ্ঞাতকৃত

Answer 13

আমারও একই সমস্যা ছিল, তবে এই ডাব্লু।

আমার ক্ষেত্রে আমাকে পুনরায় লোড করার আগে আমার ফর্মটি পুনরায় সেট করতে হয়েছিল:

this.form = অপরিবর্তিত; this.router.navigate ([পাথ]);

Answer 14

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

Answer 15

আপনি সমস্ত ফর্ম নিয়ন্ত্রণ সক্ষম / অক্ষম করতে একটি ফাংশন ঘোষণা করতে পারেন:

  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

Answer 16

একটি ক্ষেত্র তৈরি করতে হলে নিষ্ক্রিয় এবং সক্ষম এর প্রতিক্রিয়াশীল ফর্ম কৌণিক 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();

অক্ষম জন্য একই, অক্ষম () এর সাথে সক্ষম () প্রতিস্থাপন।

এই কাজ করে। প্রশ্নের জন্য মন্তব্য।