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




angular2-forms angular2-formbuilder (6)

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>

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

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

<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>

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

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

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

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


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

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

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

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


जब आप formcontrolname लिखते हैं तो Angular 2 स्वीकार नहीं करता है। आपको formControlName लिखना है। यह दूसरे शब्दों के अपरकेस के बारे में है।

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

यदि त्रुटि अभी भी होती है, तो सभी ऑब्जेक्ट (myObject) फ़ील्ड के लिए प्रपत्र नियंत्रण सेट करने का प्रयास करें।

उदाहरण के लिए प्रारंभ <form> </form> के बीच: <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.


ठीक है, अंत में यह काम कर रहा है: https://github.com/angular/angular/pull/10314#issuecomment-242218563

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


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

उदाहरण:

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

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

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

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

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>







angular2-formbuilder