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

Question

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>

Comments

क्या आपने आयात किया FormsModuleऔर ReactiveFormsModule?

— गुंटर Zöchbauer

ज़रूर, दोनों

— user2363245

AFAIK, केवल मौजूदा व्याख्या निम्नलिखित है: blog.angular-university.io/…

— user2363245

परिवर्तन का स्रोत मिला: github.com/angular/angular/pull/10314

— user2363245

Answer 1

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

[ngModelOptions]="{standalone: true}"

Comments

स्टैंडअलोन का क्या मतलब है?

— जैस

इसका अर्थ यह है कि इसका प्रारूप मॉडल / डेटा द्वारा संभाला नहीं गया है ताकि आप किसी भी वस्तु / मॉडल से डेटा पास कर सकें, जैसा कि आप AngularJS 1

— Avenir ajokaj

मैं केवल अपने परीक्षण सेटअप में इस समस्या को देखता हूं। क्या बिल्कुल गायब है? [ngModelOptions] = "{स्टैंडअलोन: सच}" परीक्षण को ठीक करता है लेकिन तर्क बदलता है। ngModel को मूल घटक से विरासत में मिला है, जो मेरे मामले में ngForm घोषित करता है

— aholbreich

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

— WasiF

Answer 2

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

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

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

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

Comments

क्या होगा यदि आप सत्यापन के लिए उपयोग करना चाहते हैं और एक ही समय में ngModel के साथ इसका उपयोग करते हैं?

— पॉल

मेरे मामले में मैं फॉर्मग्रुप के अंदर एक तत्व के लिए फॉर्मकंट्रोल घोषित करने से चूक गया!

— सागर खत्री

Answer 3

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

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

Answer 4

जब आप 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>.

Answer 5

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>

Answer 6

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

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

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

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

Answer 7

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

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

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

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

Answer 8

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

उदाहरण:

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

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

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

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

Comments

इसके लिए एक समाधान यह भी हो सकता है कि आप [formGroup] = "myGroup" और आंतरिक रूप से संदर्भ [(ngModel)] के साथ एक संपत्ति का उपयोग कर रहे हैं, जो formGroup में नगण्य है। [ngModelOptions] जोड़ने का प्रयास करें = "{स्टैंडअलोन: सच}" ताकि आप अपने कंपाइलर को बताएं कि इसे बाहर रखा जा सकता है और यह एक स्टैंडअलोन संपत्ति है

— ProblemAnswerQue

Answer 9

ऐसा लगता है कि आप प्रपत्र प्रपत्र पर उसी प्रपत्र फ़ील्ड पर ngModel का उपयोग कर रहे हैं। NgModel इनपुट संपत्ति और ngModelChange घटना का उपयोग प्रतिक्रियाशील रूप निर्देशों के साथ समर्थन के लिए कोणीय v6 में किया गया है और इसे कोणीय v7 में हटा दिया जाएगा।

Answer 10

जब आप कुछ प्रपत्र नियंत्रण (जैसे इनपुट्स, चयन, आदि) आपके प्रपत्र समूह टैग में बिना किसी प्रपत्रकंट्रोलनाम की संपत्ति के होते हैं, तो यह त्रुटि क्षमा करती है।

उन उदाहरणों में त्रुटि है:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

दो तरीके हैं, अकेले खड़े:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

या इसे फॉर्मग्रुप में शामिल करें

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

अंतिम का अर्थ है कि उन्हें इनिशियलाइज़ेशन फॉर्मग्रुप में परिभाषित करना

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});