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

स्वीकृत उत्तर में दिए गए दो के लिए एक 3 तुल्यता है, जो यह है (अनुशंसित नहीं):

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

ध्यान दें कि हम अभी भी [formGroup] निर्देश का उपयोग कर रहे हैं।

हालाँकि, इस टेम्पलेट को त्रुटि के बिना संकलित करने के लिए, फिर आपके घटक को कंट्रक्शन कंट्रोल्स के रूप में नियंत्रण की घोषणा करने की आवश्यकता है न कि फॉर्मकंट्रोल:

myComponent.ts

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

हालांकि, कृपया ध्यान दें कि AbstractControls की घोषणा करने की अनुशंसा नहीं की जाती है , इसलिए यदि आपको त्रुटि मिलती है, Cannot find control with unspecified name attributeतो यह संभव है कि आपने शैलियों को मिलाया है या आपके नियंत्रण को AbstractControls घोषित किया है।

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निर्देश में परिभाषित प्रपत्र नियंत्रण करने के लिए प्रत्येक व्यक्ति के इनपुट बांधताFormGroup

Question 6

साथ [formControl]क्योंकि आप रिएक्टिव प्रोग्रामिंग फायदे का उपयोग कर सकते FormControlएक संपत्ति नामक valueChangesजो एक रिटर्न (मैं अभी इस एक पता है, शायद वहाँ है कि तुलना में अधिक है) Observableजो आप सदस्यता और इसका इस्तेमाल कर सकते हैं। (उदाहरण के लिए, यह उन रजिस्टर परिदृश्यों में बहुत उपयोगी है, जिन्हें आप इनपुट ईमेल की जाँच करना चाहते हैं, जैसे ही उपयोगकर्ता मान को बदलता है, दोहराया नहीं जाता है)