angular ngModel का उपयोग पैरेंट फॉर्मग्रुप निर्देश के साथ प्रपत्र नियंत्रण को पंजीकृत करने के लिए नहीं किया जा सकता




angular2-forms angular2-formbuilder (7)

यदि आप [formGroup] साथ [formGroup] का उपयोग करना चाहते हैं, तो आपको name विशेषता को formControlNameformControlName साथ formControlNameformControlName

उदाहरण:

यह काम नहीं करता है क्योंकि यह [formGroup]and name` विशेषता का उपयोग करता है।

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

आपको name विशेषता को formControlNameformControlName द्वारा प्रतिस्थापित करना चाहिए और यह इस तरह ठीक काम करेगा:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

RC5 में अपग्रेड करने के बाद हमें यह त्रुटि मिलने लगी:

ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
  formGroup's partner directive "formControlName" instead.  Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

  Example:


<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

ऐसा लगता है कि RC5 में दोनों को अब एक साथ इस्तेमाल नहीं किया जा सकता है, लेकिन मुझे इसका कोई वैकल्पिक समाधान नहीं मिला।

यहाँ अपवाद का उत्पादन करने वाला घटक है:

<select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
</select>

@Avenir ajokaj के उत्तर पर विस्तार

एक नौसिखिया होने के नाते भी मुझे पहली बार में त्रुटि संदेश स्पष्ट रूप से समझ नहीं आया।

त्रुटि संदेश जो इंगित करता है, वह यह है कि आपके फॉर्मग्रुप में आपके पास एक ऐसा तत्व है, जिसे आपके फॉर्मकंट्रोल में हिसाब नहीं मिलता है। (जानबूझकर / गलती से)

यदि आप इस क्षेत्र को मान्य नहीं करने का इरादा रखते हैं, लेकिन फिर भी इस इनपुट तत्व पर ngModel का उपयोग करना चाहते हैं, तो कृपया यह इंगित करने के लिए कि यह @Avenir द्वारा उल्लिखित सत्यापन की आवश्यकता के बिना एक स्टैंडअलोन घटक है, ध्वज जोड़ें।


ठीक है, आखिरकार यह काम कर गया: https://github.com/angular/angular/pull/10314#issuecomment-242218563

संक्षेप में, अब आप formGroup विशेषता के भीतर name विशेषता का उपयोग नहीं कर सकते हैं, और इसके बजाय formControlName उपयोग करना चाहिए


import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
    });
<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>


मुझे सिर्फ यह त्रुटि मिली क्योंकि मैंने एक formGroup विशेषता के साथ एक div भीतर अपने सभी फॉर्म नियंत्रणों को संलग्न नहीं किया था।

उदाहरण के लिए, यह एक त्रुटि फेंक देगा

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

यह याद करने के लिए काफी आसान हो सकता है अगर यह एक विशेष रूप से लंबा है।


उत्तर त्रुटि संदेश पर सही है, आपको यह इंगित करने की आवश्यकता है कि यह स्टैंडअलोन है और इसलिए यह प्रपत्र नियंत्रणों के साथ संघर्ष नहीं करता है:

[ngModelOptions]="{standalone: true}"

यदि घटक में 1 से अधिक फ़ॉर्म हैं, तो सभी नियंत्रण और फ़ॉर्म पंजीकृत करें

मुझे यह जानने की आवश्यकता थी कि यह एक निश्चित घटक में क्यों हो रहा है और किसी अन्य घटक में नहीं।

मुद्दा यह था कि मेरे पास एक घटक में 2 रूप थे और दूसरा रूप अभी तक [formGroup] नहीं था और अभी तक पंजीकृत नहीं था क्योंकि मैं अभी भी रूपों का निर्माण कर रहा था।

मैंने आगे बढ़ कर एक इनपुट को पंजीकृत किए बिना दोनों रूपों को पूरा किया जो कि पंजीकृत नहीं है जो समस्या को हल करता है।





angular2-formbuilder