ফর্ম বিল্ডার নিয়ন্ত্রণের জন্য ম্যানুয়ালি মান সেট করুন

Question

এটি আমাকে বাদাম চালাচ্ছে, আমি বন্দুকের নীচে আছি এবং এই জন্য আরও একটি পুরো দিন ব্যয় করতে পারে না।

আমি উপাদানটির মধ্যে ম্যানুয়ালি একটি নিয়ন্ত্রণ মান ('ডিপ্ট') সেট করার চেষ্টা করছি, এবং এটি ঠিক কাজ করছে না - এমনকি নতুন মান লগগুলি সঠিকভাবে কনসোল করার জন্য।

এখানে ফর্ম বিল্ডার ইনস্ট্যান্স রয়েছে:

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

এটি ইভেন্ট হ্যান্ডলার যা নির্বাচিত বিভাগকে গ্রহণ করে:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

এখন যখন ফর্মটি জমা দেওয়া হয় এবং আমি লগ আউট করি this.formতখনও ক্ষেত্রটি ফাঁকা! আমি অন্যান্য updateValue()পিপিএল ব্যবহার দেখেছি কিন্তু এটি বিটা 1 এবং আমি নিয়ন্ত্রণটিতে ফোন করার বৈধ পদ্ধতি হিসাবে দেখতে পাচ্ছি না।

আমি updateValueAndValidity()কোনও সাফল্য ছাড়াই কল করার চেষ্টা করেছি :(।

আমি কেবল ngControl="dept"ফর্ম উপাদানটিতে ব্যবহার করব, যেমন আমি বাকী ফর্মটি করছি তবে এটির একটি কাস্টম নির্দেশ / উপাদান।

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>

Comments

আমি একই পরিস্থিতিতে দৌড়েছি, দৃশ্যের মানটি http.get- সাবস্ক্রাইব এবং ফর্মের মানটি লোড করা হয়েছিল, তবে প্রথমে কার্যকর হওয়া লাইনের লাইনটি নির্ধারণ করে, সাবস্ক্রাইবটি পরে তার অ্যাসিনক্রোনাস হিসাবে কার্যকর করা হবে exec সাবস্ক্রাইব মধ্যে মান নির্ধারণ তার সেট নিশ্চিত করুন। my2cents!

— হাইডটেকি

Answer 1

আপডেট হয়েছে: 19/03/2017

this.form.controls['dept'].setValue(selected.id);

পুরানো:

আপাতত আমরা টাইপ কাস্ট করতে বাধ্য হচ্ছি:

(<Control>this.form.controls['dept']).updateValue(selected.id)

আমি খুব মার্জিত না। ভবিষ্যতের সংস্করণগুলিতে এটি উন্নত হবে আশা করি।

Comments

ধন্যবাদ, এটি সুন্দরভাবে কাজ করে। বৈধতাও সাফ করা দরকার: (<Control>this.form.controls['dept']).setErrors(null)

— ম্যান কল পেয়ে হ্যানি

বা এখনও this.form.get('dept').setValue(selected.id):)

— বিকাশকারী

শুধু একটি নোট. আপনি কোনও সূচক ছাড়াই সরাসরি সম্পত্তি অ্যাক্সেস করতে পারেন। this.form.controls.dept.setValue(selected.id);

— জেমস পোলুস

তবে এটি নতুন ডেটার জন্য বৈধতা কার্যকর করবে না !! আপডেট করার পরে কীভাবে ম্যানুয়ালি পরিবর্তন সনাক্তকরণ শুরু করবেন?

— ksh

এটি আমার জন্য 2019 এর এই কাজগুলি:this.form.controls['dept'].setValue(selected.id);

— জন লোপেজ

Answer 2

কৌণিক 2 ফাইনালে (আরসি 5 +) ফর্মের মান আপডেট করার জন্য নতুন এপিআই রয়েছে। patchValue()এপিআই পদ্ধতি আংশিক ফর্ম আপডেট, যেখানে আমরা শুধুমাত্র ক্ষেত্র কিছু নির্দিষ্ট করতে হবে সমর্থন করে:

this.form.patchValue({id: selected.id})

রয়েছে setValue()এপিআই পদ্ধতি যে সমস্ত ফর্ম ক্ষেত্রগুলি সঙ্গে একটি বস্তু প্রয়োজন। যদি কোনও ক্ষেত্র অনুপস্থিত থাকে তবে আমরা একটি ত্রুটি পেয়ে যাব।

Comments

শুধু যোগ করার জন্য এখন পর্যন্ত updateValue(Filoche দ্বারা গৃহীত উত্তর থেকে) পক্ষে অবচিত করা হচ্ছেsetValue

— superjos

এখানে গিথুবকে সরকারীভাবে অনুরোধ জানানো হয়েছে updateValue()এবং অবচয় এবং পরিচয় করিয়ে দেওয়ার জন্য যুক্তি patchValueএবং setValue।

— দ্য ব্রোকএলিস

তবে এটি নতুন ডেটার জন্য বৈধতা কার্যকর করবে না !! আপডেট করার পরে কীভাবে ম্যানুয়ালি পরিবর্তন সনাক্তকরণ শুরু করতে হবে

— ksh

Answer 3

অ্যানগুলার 2 ফাইনালের এপিআই আপডেট হয়েছে। তারা এর জন্য অনেক পদ্ধতি যুক্ত করেছে।

নিয়ামক থেকে ফর্ম নিয়ন্ত্রণ আপডেট করার জন্য এটি করুন:

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

ত্রুটিগুলি পুনরায় সেট করার দরকার নেই

তথ্যসূত্র

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Comments

উভয়ের মধ্যে পার্থক্য - setValue()যখন এ বলা হয় তখন formGroup/formBuilderফর্মের নীচে সমস্ত মান সেট করা দরকার। patchValue()যখন একই বলা হয়, নির্দিষ্ট মানগুলি আপডেট করতে ব্যবহৃত হতে পারে।

— বিভোর দুবে

Answer 4

প্রতিক্রিয়াশীল ফর্ম নিয়ন্ত্রণের মান আপডেট করতে আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করতে পারেন। নিম্নলিখিত প্রয়োজনের যে কোনওটি আপনার প্রয়োজন অনুসারে উপযুক্ত হবে।

সেটভ্যালু () ব্যবহার করার পদ্ধতিগুলি

this.form.get("dept").setValue(selected.id);
this.form.controls["dept"].setValue(selected.id);

প্যাচভ্যালু () ব্যবহার করার পদ্ধতিগুলি

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

শেষ পদ্ধতিটি ফর্মের সমস্ত নিয়ন্ত্রণ পুরোপুরি লুপ করবে যাতে একক নিয়ন্ত্রণ আপডেট করার সময় এটি পছন্দ হয় না

ইভেন্ট হ্যান্ডলারের অভ্যন্তরে আপনি যে কোনও পদ্ধতি ব্যবহার করতে পারেন

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

যদি প্রয়োজন হয় তবে আপনি ফর্ম গ্রুপে একাধিক নিয়ন্ত্রণ আপডেট করতে পারেন

this.form.patchValue({"dept": selected.id, "description":"description value"});

Answer 5

আপনি এটি চেষ্টা করতে পারেন:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].updateValue(selected.id);
}

আরও তথ্যের জন্য, আপনি updateValueপদ্ধতির দ্বিতীয় প্যারামিটার সম্পর্কিত সংশ্লিষ্ট জেএস ডকের দিকে নজর রাখতে পারেন : https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model। ts # L269 ।

Comments

আপনার জবাবের জন্য ধন্যবাদ - তবে আপডেটভ্যালুটি কৌণিক 2 বিটা 1 তে একটি বৈধ পদ্ধতি বলে মনে হচ্ছে না - আপনি সেই পদ্ধতিটি ব্যবহার করতে সক্ষম হলেন এমন কোনও সংস্করণে আপনি কী আছেন?

— ম্যাথু ব্রাউন

টাইপ করা বিষয় নিম্নলিখিত ত্রুটির দেয়: error TS2339: Property 'updateValue' does not exist on type 'AbstractControl'। সেই উপাদানটিতে, ফর্মটির ধরণ রয়েছে ControlGroup। সম্ভবত আমি যদি এগুলি দিয়ে পৃথকভাবে তৈরি করি তবে new Control()এটি কার্যকর হবে

— ম্যাথু ব্রাউন

Answer 6

এগুলির কোনওটিই আমার পক্ষে কাজ করেনি। আমার করতেই হতো:

  this.myForm.get('myVal').setValue(val);

Comments

আমার সাথেও তাই হয়েছিল। কেন এই ক্ষেত্রে?

— রেহমানালী মোমিন

Answer 7

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

আপনি যদি না চান তবে ম্যানুয়ালি প্রতিটি ক্ষেত্র সেট করুন।

Answer 8

@ ফিলোচে এর কৌণিক 2 আপডেট সমাধান। ব্যবহারFormControl

(<Control>this.form.controls['dept']).updateValue(selected.id)

import { FormControl } from '@angular/forms';

(<FormControl>this.form.controls['dept']).setValue(selected.id));

বিকল্পভাবে আপনি @ AngularUniversity এর সমাধানটি ব্যবহার করতে পারেন যা ব্যবহার করেpatchValue

Answer 9

আমি জানি উত্তরটি ইতিমধ্যে দেওয়া আছে তবে আমি কীভাবে কোনও ফর্মের মূল্য আপডেট করতে হবে তার জন্য একটি সংক্ষিপ্ত উত্তর দিতে চাই যাতে অন্যান্য নতুন আগতগণ একটি পরিষ্কার ধারণা পেতে পারে।

আপনার ফর্ম কাঠামো একটি উদাহরণ হিসাবে এটি ব্যবহার করার জন্য তাই নিখুঁত। সুতরাং, আমার উত্তর জুড়ে আমি এটি রূপ হিসাবে চিহ্নিত করব।

this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required]
  });

সুতরাং আমাদের ফর্মটি একটি ফর্মগ্রুপ ধরণের অবজেক্টের যেখানে তিনটি ফর্মকন্ট্রোল রয়েছে ।

মডেলের মান আপডেট করার জন্য দুটি উপায় রয়েছে:

• স্বতন্ত্র নিয়ন্ত্রণের জন্য একটি নতুন মান সেট করতে setValue () পদ্ধতিটি ব্যবহার করুন। সেটভ্যালু () পদ্ধতিটি ফর্ম গ্রুপের কাঠামোর সাথে কঠোরভাবে অনুসরণ করে এবং নিয়ন্ত্রণের জন্য পুরো মানটিকে প্রতিস্থাপন করে।

• ফর্মের মডেলটিতে পরিবর্তিত অবজেক্টে সংজ্ঞায়িত যে কোনও বৈশিষ্ট্য প্রতিস্থাপন করতে প্যাচভ্যালু () পদ্ধতিটি ব্যবহার করুন।

সেটভ্যালু () পদ্ধতির কঠোর চেকগুলি জটিল আকারগুলিতে বাসা বাঁধার ত্রুটিগুলি ধরতে সহায়তা করে, যখন প্যাচভ্যালু () এই ত্রুটিগুলিতে নিঃশব্দে ব্যর্থ হয়।

কৌনিক সরকারী ডকুমেন্টেশন থেকে এখানে

সুতরাং, যখন একাধিক নিয়ন্ত্রণ রয়েছে এমন একটি ফর্ম গোষ্ঠীর উদাহরণটির জন্য মান আপডেট করার সময়, তবে আপনি কেবলমাত্র মডেলের অংশগুলি আপডেট করতে চাইতে পারেন। প্যাচভ্যালু () হ'ল আপনি যা অনুসন্ধান করছেন।

উদাহরণ দেখতে দিন। আপনি যখন প্যাচভ্যালু () ব্যবহার করেন

this.form.patchValue({
    dept: 1 
});
//here we are just updating only dept field and it will work.

তবে আপনি যখন সেটওয়ালু () ব্যবহার করেন তখন আপনাকে পুরো মডেলটি আপডেট করতে হবে কারণ এটি ফর্ম গোষ্ঠীর কাঠামোটি কঠোরভাবে মেনে চলে। সুতরাং, যদি আমরা লিখি

this.form.setValue({
    dept: 1 
});
// it will throw error.

আমাদের অবশ্যই ফর্ম গ্রুপ মডেলের সমস্ত সম্পত্তি পাস করতে হবে। এটার মত

this.form.setValue({
      name: 'Mr. Bean'
      dept: 1,
      description: 'spome description'
  });

তবে আমি এই স্টাইলটি ঘন ঘন ব্যবহার করি না। আমি নিম্নলিখিত পদ্ধতির ব্যবহারটি পছন্দ করি যা আমার কোডটিকে আরও পরিষ্কার এবং আরও বোধগম্য রাখতে সহায়তা করে।

আমি যা করি তা হ'ল, আমি সমস্ত নিয়ন্ত্রণগুলি পৃথক ভেরিয়েবল হিসাবে ঘোষণা করি এবং নির্দিষ্ট নিয়ন্ত্রণটি আপডেট করার জন্য setValue () ব্যবহার করি।

উপরের ফর্মের জন্য, আমি এই জাতীয় কিছু করব।

get companyIdentifier(): FormControl {
    return this.form.get('name') as FormControl;
}

get dept(): FormControl {
    return this.form.get('dept') as FormControl;
}

get description(): FormControl {
    return this.form.get('description') as FormControl;
}

যখন আপনার ফর্ম নিয়ন্ত্রণ আপডেট করতে হবে তখন আপডেট করার জন্য কেবল সেই সম্পত্তিটি ব্যবহার করুন। উদাহরণস্বরূপ ব্যবহারকারী যখন ড্রপ ডাউন তালিকা থেকে কোনও আইটেম নির্বাচন করেন তখন প্রশ্নকর্তা ডিপার্টমেন্ট ফর্ম নিয়ন্ত্রণ আপডেট করার চেষ্টা করেছিলেন।

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.

  this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}

ফর্মগ্রুপের সমস্ত বৈশিষ্ট্য এবং পদ্ধতি কীভাবে তা জানার জন্য আমি ফর্মগ্রুপ এপিআইয়ের পরামর্শ দেওয়ার পরামর্শ দিই।

অতিরিক্ত : গিটার সম্পর্কে জানতে এখানে দেখুন

Answer 10

আপনি যদি ফর্ম নিয়ন্ত্রণ ব্যবহার করছেন তবে এটি করার সহজ উপায়:

this.FormName.get('ControlName').setValue(value);

Answer 11

টিপ: আপনি যদি ব্যবহার করছেন setValueতবে ফর্মটিতে প্রতিটি সম্পত্তি সরবরাহ না করলে আপনি একটি ত্রুটি পাবেন:

Must supply a value for form control with name: 'stateOrProvince'.

সুতরাং আপনি ব্যবহার করতে প্ররোচিত হতে পারেন patchValue, তবে আপনি যদি একটি সম্পূর্ণ ফর্ম আপডেট করার চেষ্টা করছেন তবে এটি বিপজ্জনক হতে পারে। আমার কাছে addressএটি আছে stateOrProvinceবা stateCdনা এটি নির্ভর করে এটি আমেরিকা যুক্তরাষ্ট্র বা বিশ্বব্যাপী।

পরিবর্তে আপনি এটির মতো আপডেট করতে পারেন - যা নালকে ডিফল্ট হিসাবে ব্যবহার করবে:

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );