Angular2 Jika ngModel digunakan dalam tag formulir, atribut nama harus disetel atau formulir

Saya mendapatkan kesalahan ini dari Angular 2

core.umd.js: 5995 KECUALI: Tidak tertangkap (dalam janji): Kesalahan: Kesalahan pada app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 disebabkan oleh: Jika ngModel digunakan dalam bentuk tag, salah satu atribut nama harus berupa: set atau kontrol formulir harus didefinisikan sebagai 'mandiri' di 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>

Ini adalah bagaimana saya menggunakan tag formulir:

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

Jika ngForm digunakan, semua bidang input yang [(ngModel)]=""harus memiliki nama atribut dengan nilai.

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

Karena setiap pengembang memiliki kebiasaan yang sama, tidak membaca kesalahan lengkap, baca saja baris pertama dan mulailah mencari jawaban dari orang lain :) :) Saya juga salah satunya, itu sebabnya saya ada di sini:

Baca kesalahan, dengan jelas mengatakan:

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

Apa lagi yang perlu kita pahami kesalahan ini?

Gunakan salah satu opsi, semuanya akan berjalan lancar.

Kedua atribut tersebut diperlukan dan juga periksa kembali semua elemen bentuk memiliki atribut "nama". jika Anda menggunakan konsep form submit, sebaiknya gunakan tag div saja sebagai ganti elemen form.

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

Dalam kasus saya kesalahan terjadi karena di bawah ini dalam marka html satu baris lagi ada tanpa atribut nama .

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

Tetapi browser masih melaporkan bahwa baris pertama memiliki kesalahan. Dan sulit untuk menemukan sumber kesalahan jika Anda memiliki elemen lain di antara keduanya.

Ketika Anda melihat konsol dengan jelas. Ini akan memberi Anda dua contoh. Terapkan salah satunya.

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

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

Saya perhatikan bahwa alat pengembang Chrome terkadang hanya menggarisbawahi elemen pertama dalam warna merah swaggly bahkan jika itu diatur dengan benar dengan sebuah nama. Ini melempar saya untuk sementara waktu.

Orang harus yakin untuk menambahkan nama ke setiap elemen pada formulir yang berisi ngModel terlepas dari mana yang digarisbawahi berlekuk-lekuk.

Cukup mudah untuk memperbaikinya.

Bagi saya, kami memiliki lebih dari satu input dalam formulir. Kita perlu mengisolasi input / jalur yang menyebabkan kesalahan dan cukup menambahkan nameatribut. Itu memperbaiki masalah bagi saya:

Sebelum:

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

Setelah: saya baru saja menambahkan nameatribut untuk selectdan checkboxdan itu memperbaiki masalah. Sebagai berikut:

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

Seperti yang Anda lihat menambahkan nameatribut. Tidak perlu diberikan sama dengan ngModelnama Anda . Memberikan nameatribut saja akan memperbaiki masalah.

Anda perlu mengimpor {NgForm} dari @ angular / form di page.ts Anda;

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

Di Page.ts Anda, terapkan fungsi Anda untuk memanipulasi data formulir:

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

Coba ini...

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

Untuk semua orang yang tidak panik dengan pesan kesalahan itu sendiri, tetapi hanya googling untuk penjelasan mengapa contoh dari sini tidak bekerja (yaitu pemfilteran dinamis tidak terjadi ketika teks diketik ke dalam kolom input): itu tidak akan berfungsi sampai Anda akan menambahkan parameter nama di bidang input. Tidak ada yang menunjuk pada penjelasan mengapa pipa tidak bekerja, tetapi pesan kesalahan menunjuk ke topik ini dan memperbaikinya sesuai dengan jawaban yang diterima membuat filter dinamis berfungsi.

Anda tidak menyebutkan versi yang Anda gunakan, tetapi jika Anda menggunakan rc5 atau rc6, gaya bentuk "lama" itu sudah usang. Lihatlah ini untuk panduan tentang teknik formulir "baru": https://angular.io/docs/ts/latest/guide/forms.html

Agar dapat menampilkan informasi dalam bentuk yang Anda inginkan, Anda perlu memberikan input spesifik nama-nama yang menarik. Saya sarankan Anda memiliki:

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

Bagi saya, solusinya sangat sederhana. Saya mengubah <form>tag menjadi a <div>dan kesalahan hilang.

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

Itulah tiga hal yang perlu digunakan ngModel di dalam direktif formGroup.

Perhatikan bahwa nama yang sama harus digunakan.