FormControlName এবং formControl এর মধ্যে পার্থক্য কী?

Question 1

আমি ReactiveFormsModuleএকটি ফর্ম ধারণ করে এমন উপাদান তৈরি করতে Angular2 ব্যবহার করছি । আমার কোডটি এখানে:

foo.component.ts :

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html (সহ [formControl]):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" [formControl]="myForm.controls.fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

foo.component.html (সহ formControlName):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" formControlName="fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
            <label>Female</label>
        </div>
    </div>
</div>

উভয় উপায় কাজ করে। তবে আমি বুঝতে পারছি না যে ব্যবহার [formControl]এবং এর মধ্যে পার্থক্য কী formControlName।

Question 2

আমি বিশ্বাস করি আপনি একটি গুরুত্বপূর্ণ বিষয়টি মিস করেছেন: [formGroup]দ্বিতীয় উদাহরণে নির্দেশনা। আপনার ফর্মটি একাধিক ডট নেভিগেশনগুলি সংরক্ষণ করতে formControlNameএকত্রে ব্যবহৃত হয় [formGroup]। উদাহরণ স্বরূপ:

<div>
  <input type="text" [formControl]="myForm.controls.firstName"/>
  <input type="text" [formControl]="myForm.controls.lastName"/>
  <input type="text" [formControl]="myForm.controls.email"/>
  <input type="text" [formControl]="myForm.controls.title"/>
</div>

এর সমতুল্য:

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

এখন নেস্টেড কল্পনা FormGroups:)

Question 3

[formControl]FormControlআপনি তৈরি করা দৃষ্টান্তের জন্য একটি রেফারেন্স বরাদ্দ করে FormControlDirective।

formControlName নাম অনুসারে নিয়ন্ত্রণ সন্ধান করতে ফর্মগুলির মডিউলটির জন্য একটি স্ট্রিং বরাদ্দ করে।

আপনি যদি নিয়ন্ত্রণগুলির জন্য ভেরিয়েবলগুলি তৈরি করেন .তবে হ্যারি দ্বারা উল্লিখিত অনুসারে আপনারও প্রয়োজন হবে না , তবে আমি [formGroup]পরিবর্তে ব্যবহার করার পরামর্শ দেব কারণ আরও জটিল আকারের সাথে এটি অগোছালো হয়ে যেতে পারে।

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('', Validators.required);
    this.gender = new FormControl('');
    this.myForm = fb.group({
        'fullname': this.fullName,
        'gender': this.gender
    });
}

Question 4

গৃহীত উত্তরে প্রদত্ত দু'জনের তৃতীয় সমতা রয়েছে যা এটি (প্রস্তাবিত নয়):

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

লক্ষ্য করুন যে আমরা এখনও [ফর্মগ্রুপ] নির্দেশনাটি ব্যবহার করছি।

যাইহোক, এই টেমপ্লেটটি ত্রুটি ছাড়াই সংকলন করার জন্য, তারপরে আপনার উপাদানগুলিকে নিয়ন্ত্রণগুলি AbstractControls হিসাবে ঘোষণা করতে হবে এবং ফর্মকন্ট্রোল হিসাবে নয়:

myComponent.ts

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

তবে দয়া করে নোট করুন যে অ্যাবস্ট্রাক্ট্রন্টলগুলি ঘোষণার প্রস্তাব দেওয়া হয় না , সুতরাং যদি আপনি ত্রুটিটি পান Cannot find control with unspecified name attributeতবে সম্ভবত আপনি শৈলীগুলি মিশ্রিত করেছেন বা আপনার নিয়ন্ত্রণগুলি অ্যাবস্ট্রাক্ট্রন্টল হিসাবে ঘোষণা করেছেন।

Question 5

কৌনিক দস্তাবেজগুলি থেকে ( https://angular.io/guide/reactive-forms ):

উপাদান

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

টেমপ্লেট

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

মনে রাখবেন যে FormGroupনিয়ন্ত্রণগুলির একটি গ্রুপ রয়েছে ঠিক তেমনই প্রোফাইলফর্মটি নির্দেশের FormGroupসাথে ফর্ম উপাদানটির সাথে আবদ্ধ FormGroup, মডেল এবং ইনপুট যুক্ত ফর্মের মধ্যে একটি যোগাযোগ স্তর তৈরি করে। formControlNameদ্বারা উপলব্ধ ইনপুট FormControlNameনির্দেশ সংজ্ঞায়িত ফর্ম নিয়ন্ত্রণ প্রতিটি ইনপুট bindsFormGroup

Question 6

আপনার সাথে [formControl]প্রতিক্রিয়াশীল প্রোগ্রামিং সুবিধাগুলি ব্যবহার করতে পারেন কারণ FormControlএর একটি সম্পত্তি রয়েছে valueChanges(আমি এই মুহূর্তে এটি জানি, সম্ভবত এর চেয়ে আরও বেশি কিছু আছে) Observableযা আপনি সাবস্ক্রাইব করতে এবং এটি ব্যবহার করতে পারবেন এমন প্রত্যাবর্তন করে। (উদাহরণস্বরূপ, এটি নিবন্ধের পরিস্থিতিতে খুব দরকারী যা আপনি ইনপুট ইমেলটি চেক করতে চান ব্যবহারকারী ব্যবহারের সাথে সাথে মূল্য পরিবর্তন করার সাথে সাথে পুনরাবৃত্তি হবে না)