প্রতিক্রিয়াশীল ফর্ম - বৈশিষ্ট্য অক্ষম

Question 1

আমি disabledএকটি থেকে গুণটি ব্যবহার করার চেষ্টা করছি formControl। আমি যখন এটি টেমপ্লেটে রাখি তখন এটি কাজ করে:

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

তবে ব্রাউজারটি আমাকে সতর্ক করে:

দেখে মনে হচ্ছে আপনি একটি প্রতিক্রিয়াশীল ফর্ম নির্দেশের সাথে অক্ষম বৈশিষ্ট্যটি ব্যবহার করছেন। আপনি যখন আপনার উপাদান শ্রেণিতে এই নিয়ন্ত্রণটি সেট আপ করেন আপনি যদি সত্যকে অক্ষম সেট করে থাকেন তবে অক্ষম বৈশিষ্ট্যটি আসলে আপনার জন্য ডিওমে সেট করা হবে। 'পরীক্ষার পরে পরিবর্তিত' ত্রুটিগুলি এড়ানোর জন্য আমরা এই পদ্ধতির ব্যবহারের পরামর্শ দিই।
  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

আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করে একটি ফর্ম নিয়ন্ত্রণ সক্ষম / অক্ষম করতে পারেন:

কন্ট্রোল.ডিজিয়েবল () অথবা কন্ট্রোল.এনেবল ()

যদি এটি কাজ না করে তবে আপনি একটি নির্দেশিকা ব্যবহার করতে পারেন

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

আমার ক্ষেত্রে কৌনিক 8 । আমি শর্তের উপর নির্ভর করে ইনপুটটি সক্ষম / অক্ষম টগল করতে চেয়েছিলাম।

[attr.disabled] আমার পক্ষে কাজ করেনি তাই এখানে আমার সমাধান।

আমি [attr.disabled]এইচটিএমএল থেকে অপসারণ করেছি এবং উপাদান পরীক্ষা করে এই চেকটি সম্পাদন করেছি:

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

Question 5

আমি দেখতে পেয়েছি যে এটির কাজ করার জন্য খালি স্ট্রিং হলেও আমার ডিফল্ট মান থাকা দরকার। সুতরাং এই:

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

... এটি হয়ে উঠতে হয়েছিল:

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

আমার প্রশ্নটি দেখুন (যা আমি বিশ্বাস করি না যে এটি সদৃশ): ফর্মকন্ট্রোল কনস্ট্রাক্টরের কাছে ফর্ম স্টেট অবজেক্টে 'অক্ষম' পাস করা কাজ করে না

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

কেবলমাত্র যারা প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করছেন: নেটিভ এইচটিএমএল উপাদানগুলির জন্য [অ্যাট্রিজেড] সক্ষম হবে তবে উপাদান উপাদানগুলির জন্য আমাদের উপাদানটিকে গতিশীলভাবে অক্ষম করতে হবে।

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

অন্যথায় এটি কনসোল সতর্কতা বার্তায় প্রদর্শিত হবে।

Question 8

আমি কৌণিক 7 এ এগুলি চেষ্টা করেছি It এটি সফলভাবে কাজ করেছে।

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

একটি ফর্মকন্ট্রোল অক্ষম করে তোলে

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

বা প্রাথমিক সেট পদ্ধতি।

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

Question 10

পরিবর্তে [অক্ষম] ব্যবহার করুন [অক্ষম], আমার ক্ষেত্রে এটি ঠিক আছে

Question 11

এইচটিএমএল ক্ষেত্রে অক্ষম = "সত্য" যুক্ত করুন উদাহরণ: অক্ষম করুন

<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

আপনি যদি ফর্ম বৈধতা ব্যবহার করে থাকেন তবে মাদুর ফর্ম ক্ষেত্রগুলি অক্ষম করা অব্যাহতিপ্রাপ্ত so প্রাক্তন জন্য:

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 যদি আপনি অক্ষম করতে চান / বাটনে ক্লিক করে সক্ষম করুন এখানে একটি সহজ সমাধান আপনি প্রতিক্রিয়াশীল ফর্ম ব্যবহার করছেন।

घटक.ts ফাইলে একটি ফাংশন সংজ্ঞায়িত করুন

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

আপনার এমডি-ইনপুটটিতে নাম বৈশিষ্ট্য যুক্ত করুন। যদি এটি সমস্যার সমাধান না করে তবে আপনার টেম্পলেটটি পোস্ট করুন

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