Angular2 หากใช้ ngModel ภายในแท็กฟอร์มต้องตั้งค่าแอตทริบิวต์ name หรือแบบฟอร์ม

ฉันได้รับข้อผิดพลาดนี้จาก Angular 2

core.umd.js: 5995 ข้อยกเว้น: Uncaught (ตามสัญญา): ข้อผิดพลาด: ข้อผิดพลาดในแอป / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 เกิดจาก: หากใช้ ngModel ในแท็กฟอร์ม ตั้งค่าหรือการควบคุมแบบฟอร์มจะต้องกำหนดเป็น 'แบบสแตนด์อโลน' ใน 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()">

หากใช้ ngForm ฟิลด์อินพุตทั้งหมดที่[(ngModel)]=""ต้องมีชื่อแอ็ตทริบิวต์ที่มีค่า

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

เนื่องจากนักพัฒนาซอฟต์แวร์ทุกคนมีนิสัยเหมือนกันไม่ต้องอ่านข้อผิดพลาดเพียงแค่อ่านบรรทัดแรกและเริ่มหาคำตอบจากคนอื่น :) :) ฉันเป็นหนึ่งในพวกเขานั่นคือสาเหตุที่ฉันมาที่นี่:

อ่านข้อผิดพลาดชัดเจนว่า:

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

มีอะไรอีกที่เราต้องเข้าใจข้อผิดพลาดนี้?

ใช้ตัวเลือกใดก็ได้ทุกอย่างจะทำงานได้อย่างราบรื่น

จำเป็นต้องใช้ทั้งสองแอตทริบิวต์และตรวจสอบองค์ประกอบของฟอร์มทั้งหมดที่มีแอตทริบิวต์ "name" หากคุณกำลังใช้แนวคิดส่งแบบฟอร์มอื่น ๆ ที่ชาญฉลาดเพียงแค่ใช้แท็ก div แทนองค์ประกอบแบบฟอร์ม

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

ในกรณีของฉันเกิดข้อผิดพลาดเนื่องจากด้านล่างในมาร์กอัป html มีอีกหนึ่งบรรทัดที่ไม่มีแอตทริบิวต์name

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

แต่เบราว์เซอร์ยังคงรายงานว่าแถวแรกมีข้อผิดพลาด และเป็นการยากที่จะค้นหาสาเหตุของความผิดพลาดหากคุณมีองค์ประกอบอื่น ๆ ระหว่างสองสิ่งนี้

เมื่อคุณดูที่คอนโซลอย่างชัดเจนมันจะให้สองตัวอย่างใช้สิ่งเหล่านี้

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

หรือ <input [(ngModel)]="person.firstName" name="first">

ฉันสังเกตเห็นว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome บางครั้งจะขีดเส้นใต้องค์ประกอบแรกเป็นสีแดงอย่างยิ่งแม้ว่าจะตั้งชื่อได้อย่างถูกต้อง เรื่องนี้ทำให้ฉันผิดหวัง

จะต้องแน่ใจว่าได้เพิ่มชื่อให้กับองค์ประกอบทุกรายการในแบบฟอร์มที่มี ngModel โดยไม่คำนึงถึงสิ่งที่ขีดเส้นใต้อย่างแน่นหนา

มันค่อนข้างง่ายสำหรับการแก้ไข

สำหรับฉันเรามีมากกว่าหนึ่งอินพุตในรูปแบบ เราต้องแยกอินพุต / บรรทัดที่ทำให้เกิดข้อผิดพลาดและเพียงเพิ่ม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ระบุแอตทริบิวต์จะแก้ไขปัญหา

คุณต้องนำเข้า {NgForm} จาก @ angular / form ในหน้าของคุณ

รหัส 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 ของคุณใช้ funcion ของคุณเพื่อจัดการข้อมูลแบบฟอร์ม:

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

ลองสิ่งนี้ ...

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

สำหรับทุกคนที่ไม่ตื่นตระหนกกับข้อความแสดงข้อผิดพลาด แต่เพียง googling สำหรับคำอธิบายว่าทำไมตัวอย่างจากที่นี่ไม่ทำงาน (เช่นการกรองแบบไดนามิกไม่เกิดขึ้นเมื่อพิมพ์ข้อความลงในช่องป้อนข้อมูล): มันจะไม่ทำงาน จนกว่าคุณจะเพิ่มพารามิเตอร์ชื่อในช่องใส่ ไม่มีสิ่งใดชี้ไปที่คำอธิบายว่าทำไมไพพ์ไม่ทำงาน แต่ข้อความแสดงข้อผิดพลาดชี้ไปที่หัวข้อนี้และการแก้ไขตามคำตอบที่ยอมรับทำให้ตัวกรองแบบไดนามิกทำงาน

คุณไม่ได้พูดถึงรุ่นที่คุณใช้ แต่ถ้าคุณใช้ rc5 หรือ rc6 รูปแบบของรูปแบบ "เก่า" นั้นได้ถูกคัดค้าน ลองดูสิ่งนี้สำหรับคำแนะนำเกี่ยวกับเทคนิคแบบฟอร์ม "ใหม่": https://angular.io/docs/ts/latest/guide/forms.html

เพื่อให้สามารถแสดงข้อมูลในแบบฟอร์มที่คุณต้องการคุณต้องให้ชื่อเฉพาะของชื่อที่สนใจ ฉันขอแนะนำให้คุณมี:

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

สำหรับฉันการแก้ปัญหานั้นง่ายมาก ฉันเปลี่ยน<form>แท็กเป็น a <div>และข้อผิดพลาดหายไป

<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 ภายในคำสั่ง formGroup

โปรดทราบว่าควรใช้ชื่อเดียวกัน