Angular2 अगर ngModel का उपयोग किसी फॉर्म टैग में किया जाता है, तो या तो नाम विशेषता सेट होनी चाहिए या फ़ॉर्म

Question

मुझे यह त्रुटि कोणीय 2 से मिल रही है

core। सेट या प्रपत्र नियंत्रण को ngModelOptions में 'स्टैंडअलोन' के रूप में परिभाषित किया जाना चाहिए।

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
<td *ngFor="let lag of ce.lags">
    <div class="form-group1">
        <input name="name" [(ngModel)]="lag.name" [ngModelOptions]="{standalone: true}"  class="form-control" pattern="[0-9]*(\.[0-9]+)?" required>
    </div>

</td>

इस प्रकार मैं फॉर्म टैग का उपयोग करता हूं:

 <form #f="ngForm" (ngSubmit)="onSubmit()">

Comments

cosider को सही 1 के रूप में जवाबों में से एक को पुरस्कार देते हुए

— जी। स्टोयनेव

Answer 1

यदि ngForm का उपयोग किया जाता है, तो सभी इनपुट फ़ील्ड जिनके पास एक मान के साथ एक [(ngModel)]=""विशेषता नाम होना चाहिए ।

<input [(ngModel)]="firstname" name="something">

Comments

इस कोणीय

— Thyagarajan C

क्या नाम विशेषता का कोई विशिष्ट मूल्य है?

— अलेक्जेंडर मिल्स

कोणीय 5 प्रलेखन (कोणीय. io/guide/forms ) से: "एक फॉर्म के साथ संयोजन में [(ngModel)] का उपयोग करते समय एक नाम विशेषता को परिभाषित करना एक आवश्यकता है।"

— elshev

कोणीय 7 के लिए भी लागू!

— कोडरपीसी

मैं जोड़ना चाहूंगा कि यह तभी काम करेगा जब नाम से पहले ngModel आएगा।

— रोनाल्ड एबेलानो

Answer 2

जैसा कि प्रत्येक डेवलपर की एक सामान्य आदत होती है, पूर्ण त्रुटि को पढ़ने के लिए नहीं, बस पहली पंक्ति पढ़ें और किसी और से उत्तर की तलाश शुरू करें :) :) मैं भी उनमें से एक हूं, इसीलिए मैं यहां हूं:

त्रुटि पढ़ें, स्पष्ट रूप से कह रहे हैं:

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

इस त्रुटि को समझने के लिए हमें और क्या चाहिए?

किसी भी एक विकल्प का उपयोग करें सब कुछ सुचारू रूप से काम करेगा।

Comments

प्रत्येक विकल्प के निहितार्थ / प्रभाव का स्पष्टीकरण उपयोगी होगा - दो में से किसी एक को चुनना एक अच्छे विचार की तरह प्रतीत नहीं होता है।

— माइकल

लव

— लोला

यहाँ के लिए एक अच्छी व्याख्या है [ngModelOptions]="{standalone: true}: stackoverflow.com/a/38368261/3135317 । मेरे मामले में, मुझे पता चला कि खूंखार `ngModel का उपयोग एक फॉर्म टैग के भीतर किया जाता है, या तो नाम की विशेषता होनी चाहिए ...` त्रुटि जब मेरे पास एक नेस्टेड सरणी के लिए `* ngFor * था। मॉडल बाइंडिंग ठीक था, टेम्प्लेट बारफेड। "उदाहरण 1" COULDN'T ने काम किया है; "उदाहरण 2" एकदम सही था।

— FoggyDay

इस उत्तर ने मुझे एक ही सप्ताह में दो बार मदद की (यह स्पष्ट रूप से पहली बार छड़ी नहीं हुई);)

— जे कमिंस

Answer 3

दोनों विशेषताओं की आवश्यकता है और सभी प्रकार के तत्वों की "नाम" विशेषता भी है। यदि आप फॉर्म सबमिट कांसेप्ट का उपयोग कर रहे हैं, तो अन्य बुद्धिमान सिर्फ फॉर्म एलिमेंट के बजाय डिव टैग का उपयोग करते हैं।

<input [(ngModel)]="firstname" name="something">

Answer 4

मेरे मामले में त्रुटि इसलिए हुई क्योंकि html मार्कअप में नीचे एक और लाइन नाम की विशेषता के बिना मौजूद थी ।

<form id="form1" name="form1" #form="ngForm">
  <div class="form-group">
    <input id="input1" name="input1" [(ngModel)]="metaScript" />
    ... 
    <input id="input2" [(ngModel)]="metaScriptMessage"/>
  </div>
</form>

लेकिन ब्राउज़र अभी भी रिपोर्ट करता है कि पहली पंक्ति में त्रुटि है। और अगर आप इन दोनों के बीच अन्य तत्व हैं तो गलती का स्रोत खोजना मुश्किल है।

Answer 5

जब आप स्पष्ट रूप से कंसोल को देखते हैं। यह आपको दो उदाहरण देगा। इनमें से किसी को भी लागू करें।

<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone:
   true}">

या <input [(ngModel)]="person.firstName" name="first">

Answer 6

मैंने देखा कि क्रोम डेवलपर टूल कभी-कभी केवल स्वैगली लाल में पहले तत्व को रेखांकित करता है, भले ही वह सही ढंग से एक नाम के साथ सेट किया गया हो। इसने मुझे थोड़ी देर के लिए दूर फेंक दिया।

एक एक जोड़ना सुनिश्चित होना चाहिए नाम करने के लिए हर रूप है कि ngModel परवाह किए बिना, जिनमें से एक टेढ़ा-मेढ़ा रेखांकित होता है पर तत्व।

Answer 7

यह एक तय करने के लिए काफी आसान है।

मेरे लिए, हमारे पास फ़ॉर्म में एक से अधिक इनपुट थे। हमें त्रुटि के कारण इनपुट / लाइन को अलग करना होगा और बस nameविशेषता जोड़ना होगा । मेरे लिए यह मुद्दा तय हो गया:

इससे पहले:

<form class="example-form">

    <mat-form-field appearance="outline">

---

      <mat-select placeholder="Select your option" [(ngModel)]="sample.stat"> <!--HERE -->

---

          <mat-option *ngFor="let option of actions" [value]="option">{{option}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Enter number</mat-label>

---

      <input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

---

    </mat-form-field>

---

    <mat-checkbox [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE -->

---

  </form>

के बाद: मैं हाल ही में जोड़े nameके लिए विशेषता selectऔर checkboxऔर कहा कि समस्या का समाधान हो। निम्नलिखित नुसार:

<mat-select placeholder="Select your option" name="mySelect" 
  [(ngModel)]="sample.stat"> <!--HERE: Observe the "name" attribute -->

<input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

<mat-checkbox name="myCheck" [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE: Observe the "name" attribute -->

जैसा कि आप nameविशेषता को देखते हैं । आपके ngModelनाम के समान दिया जाना आवश्यक नहीं है । केवल nameविशेषता प्रदान करने से समस्या ठीक हो जाएगी।

Answer 8

आपको अपने पृष्ठ में @ कोणीय / रूपों से {NgForm} आयात की आवश्यकता है;

कोड HTML:

<form #values="ngForm" (ngSubmit)="function(values)">
 ...
 <ion-input type="text" name="name" ngModel></ion-input>
 <ion-input type="text" name="mail" ngModel></ion-input>
 ...
</form>

अपने Page.ts में, प्रपत्र डेटा में हेरफेर करने के लिए अपने कवक को लागू करें:

function(data) {console.log("Name: "data.value.name + " Mail: " + data.value.mail);}

Answer 9

इसे इस्तेमाल करे...

    <input type="text" class="form-control" name="name" placeholder="Name"
                  required minlength="4" #name="ngModel"
                  ngModel>
                  <div *ngIf="name.errors && (name.dirty || name.touched)">
                      <div [hidden]="!name.errors.required" class="alert alert-danger form-alert">
                          Please enter a name.
                      </div>
                      <div [hidden]="!name.errors.minlength" class="alert alert-danger form-alert">
                          Enter name greater than 4 characters.
                      </div>
                  </div>

Answer 10

उन सभी के लिए जो स्वयं त्रुटि संदेश से नहीं घबराते हैं, लेकिन स्पष्टीकरण के लिए सिर्फ गुगली करते हैं कि यहां से उदाहरण क्यों काम नहीं करता है (यानी पाठ क्षेत्र में पाठ टाइप किए जाने पर डायनेमिक फ़िल्टरिंग नहीं होती है): यह काम नहीं करेगा जब तक आप इनपुट फ़ील्ड में नाम पैरामीटर नहीं जोड़ेंगे। कुछ भी नहीं समझाता है कि पाइप क्यों काम नहीं कर रहा है, लेकिन त्रुटि संदेश इस विषय को इंगित करता है और स्वीकार किए गए उत्तर के अनुसार इसे ठीक करने से डायनामिक फ़िल्टर काम करता है।

Answer 11

आपने उस संस्करण का उल्लेख नहीं किया है जिसका आप उपयोग कर रहे हैं, लेकिन यदि आप rc5 या rc6 का उपयोग कर रहे हैं, तो उस "पुराने" रूप की शैली को हटा दिया गया है। "नई" रूपों तकनीकों पर मार्गदर्शन के लिए इस पर एक नज़र डालें: https://angular.io/docs/ts/latest/guide/forms.html

Answer 12

आप जिस रूप में चाहते हैं, उस जानकारी को प्रदर्शित करने में सक्षम होने के लिए, आपको ब्याज नामों के उन विशिष्ट इनपुट को देने की आवश्यकता है। मेरा सुझाव है कि आप क्या करें:

---

<form #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input **name="firstName" ngModel** placeholder="Enter your first name"> ...

Answer 13

मेरे लिए, समाधान बहुत सरल था। मैंने <form>टैग को एक में बदल दिया <div>और त्रुटि दूर हो गई।

Comments

ऐसा इसलिए है क्योंकि आप फॉर्म को हटा रहे हैं, इस प्रकार फॉर्म प्रदान करने वाली सभी सुविधाओं को हटा रहा है।

— astro8891

@ astro8891 मुझे कोई ज़रूरत नहीं है

— जॉन हेनकेल

Answer 14

<select name="country" formControlName="country" id="country" 
       class="formcontrol form-control-element" [(ngModel)]="country">
   <option value="90">Turkey</option>
   <option value="1">USA</option>
   <option value="30">Greece</option>
</select>

name="country"
formControlName="country" 
[(ngModel)]="country" 

उन तीन चीजों के लिए एक फॉर्मग्रुप निर्देश के अंदर ngModel का उपयोग करने की आवश्यकता है।

ध्यान दें कि उसी नाम का उपयोग किया जाना चाहिए।