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




radio-button angular2-forms (4)

कोणीय डॉक्स ( 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 इनपुट फ़ॉर्म समूह में परिभाषित प्रपत्र नियंत्रण के लिए प्रत्येक व्यक्तिगत इनपुट को बांधता है

मैं एक घटक है कि एक फार्म शामिल बनाने के लिए 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 का उपयोग करने में क्या अंतर है।


मेरा मानना ​​है कि आप एक महत्वपूर्ण बिंदु चूक गए: [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 पास एक संपत्ति है जिसका नाम valueChanges (मुझे यह अभी पता है, शायद इससे कहीं अधिक है) जो एक Observable रिटर्न देता है जिसे आप सदस्यता और उपयोग कर सकते हैं। (उदाहरण के लिए, यह उन रजिस्टर परिदृश्यों में बहुत उपयोगी है, जिन्हें आप इनपुट ईमेल की जाँच करना चाहते हैं, जैसे ही उपयोगकर्ता मान बदलता है दोहराया नहीं जाता है)


[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