Açısal2 Bir form etiketi içinde ngModel kullanılıyorsa, name niteliği ayarlanmalıdır veya form

Bu hatayı Açısal 2'den alıyorum

core.umd.js: 5995 İSTİSNA: Yakalanmadı (vaatte): Hata: app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 neden oldu: ngModel bir form etiketinde kullanılıyorsa, ad özelliğinin de olması gerekir setModelOptions içinde set veya form kontrolü 'bağımsız' olarak tanımlanmalıdır.

      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 etiketini şu şekilde kullanıyorum:

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

NgForm kullanılırsa, sahip olan tüm giriş alanları değer içeren bir [(ngModel)]=""öznitelik adına sahip olmalıdır .

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

Her geliştiricinin ortak bir alışkanlığı olduğu için, tam hatayı okumak için değil, sadece ilk satırı okuyun ve başka birinden cevap aramaya başlayın :) :) Ben de onlardan biriyim, bu yüzden buradayım:

Açık bir şekilde şunu söyleyerek hatayı okuyun:

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

Bu hatayı daha ne anlamamız gerekiyor?

Herhangi bir seçeneği kullanın, her şey düzgün çalışacaktır.

Her iki öznitelik de gereklidir ve ayrıca tüm form öğelerinin "name" özniteliğine sahip olduğunu yeniden denetleyin. form gönderme kavramı kullanıyorsanız, diğer akıllıca form öğesi yerine div etiketi kullanın.

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

Benim durumumda, hata html biçimlendirmesinde aşağıda name özniteliği olmadan bir satır daha var olduğu için hata oluştu .

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

Ancak tarayıcı hala ilk satırda hata olduğunu bildiriyor. Ve bu ikisi arasında başka unsurlar varsa hatanın kaynağını bulmak zor.

Konsola açıkça baktığınızda size iki örnek verecektir. Bunlardan herhangi birini uygulayın.

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

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

Chrome geliştirici aracının, bir adla doğru bir şekilde ayarlanmış olsa bile, bazen yalnızca ilk öğenin kıvrımlı kırmızı renkle altını çizdiğini fark ettim. Bu beni bir süre fırlattı.

Biri eklemeyi unutmayın olmalıdır adını için her ne olursa olsun bir squiggly altı çizili olan ngModel içeren form üzerinde eleman.

Bir düzeltme için oldukça kolaydır.

Benim için formda birden fazla girdi vardı. Hataya neden olan girdi / satırı izole etmemiz ve nameniteliği eklememiz gerekiyor . Bu benim için sorunu çözdü:

Önce:

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

Sonra: ben sadece eklenen nameözelliğine yönelik selectve checkboxve bu sorunu düzeltildi. Aşağıdaki gibi:

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

Gördüğünüz gibi nameözellik eklendi . İsminizle aynı şekilde verilmesi gerekli değildir ngModel. nameÖzniteliği sağlamanız sorunu çözecektir.

Sayfanızda @ açısal / formlardan {NgForm} içe aktarmanız gerekir;

Kod HTML'si:

<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 dosyasında, form verilerini değiştirmek için işlevinizi uygulayın:

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

Bunu dene...

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

Hata mesajının kendisini paniklemeyen, ancak buradan örneklerin neden çalışmadığını açıklama için googling yapan herkes için (örneğin, metin giriş alanına yazıldığında dinamik filtreleme gerçekleşmez): çalışmaz ad parametresini giriş alanına ekleyene kadar. Hiçbir şey borunun neden çalışmadığına işaret etmiyor, ancak hata mesajı bu konuyu gösteriyor ve kabul edilen cevaba göre düzeltmek dinamik filtrenin çalışmasını sağlıyor.

Kullandığınız sürümden bahsetmediniz, ancak rc5 veya rc6 kullanıyorsanız, bu "eski" biçim kullanımdan kaldırıldı. "Yeni" form teknikleri konusunda rehberlik için şuna bir göz atın: https://angular.io/docs/ts/latest/guide/forms.html

Bilgileri istediğiniz biçimde görüntüleyebilmek için, bu özel ilgi alanı adlarını girmeniz gerekir. Size tavsiye ederim:

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

Benim için çözüm çok basitti. <form>Etiketi bir olarak değiştirdim <div>ve hata giderildi.

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

Bunlar bir formGroup yönergesinde ngModel'i kullanmanız gereken üç şeydir.

Aynı adın kullanılması gerektiğini unutmayın.