angular FormControlName और FormControl में क्या अंतर है?




radio-button angular2-forms (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 के रूप में अपने नियंत्रणों की घोषणा की है।

मैं एक घटक है कि एक फार्म शामिल बनाने के लिए Angular2 के ReactiveFormsModule का उपयोग कर रहा हूं। यहाँ मेरा कोड है:

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 का उपयोग करने में क्या अंतर है।


कोणीय डॉक्स ( 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 निर्देश के साथ फार्म तत्व से FormGroup , जो मॉडल और इनपुट युक्त फॉर्म के बीच संचार परत बनाता है। FormControlName निर्देश द्वारा प्रदान किया जाने वाला formControlName इनपुट FormControlName में परिभाषित प्रपत्र नियंत्रण के लिए प्रत्येक व्यक्तिगत इनपुट को बांधता है।


मेरा मानना ​​है कि आप एक महत्वपूर्ण बिंदु चूक गए: [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 कल्पना करें :)


[formControl] FormControl लिए आपके द्वारा बनाए गए FormControl उदाहरण के लिए एक संदर्भ प्रदान करता है।

formControlName नाम द्वारा नियंत्रण को देखने के लिए प्रपत्र मॉड्यूल के लिए एक स्ट्रिंग प्रदान करता है।

यदि आप नियंत्रण के लिए चर बनाते हैं, तो आपको इसकी आवश्यकता भी नहीं है . जैसा कि हैरी ने उल्लेख किया है, लेकिन मैं इसके बजाय [formGroup] का उपयोग करने का सुझाव [formGroup] क्योंकि अधिक जटिल रूपों के साथ यह गड़बड़ हो सकता है।

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




angular2-formbuilder