Angular2 Nếu ngModel được sử dụng trong thẻ biểu mẫu, thuộc tính name phải được đặt hoặc biểu mẫu

Tôi nhận được lỗi này từ Angular 2

core.umd.js: 5995 NGOẠI TRỪ: Uncaught (trong lời hứa): Lỗi: Lỗi trong app / model_exposeure_currencies / model_exposeure_currencies.component.html: 57: 18 gây ra bởi: Nếu ngModel được sử dụng trong một thẻ mẫu thiết lập hoặc điều khiển biểu mẫu phải được xác định là 'độc lập' trong 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>

Đây là cách tôi sử dụng thẻ biểu mẫu:

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

Nếu ngForm được sử dụng, tất cả các trường đầu vào [(ngModel)]=""phải có tên thuộc tính có giá trị.

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

Vì mọi nhà phát triển đều có thói quen chung, không đọc lỗi hoàn toàn, chỉ cần đọc dòng đầu tiên và bắt đầu tìm câu trả lời từ người khác :) :) Tôi cũng là một trong số họ, đó là lý do tôi ở đây:

Đọc lỗi, nói rõ:

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

Chúng ta cần gì hơn để hiểu lỗi này?

Sử dụng bất kỳ một tùy chọn, mọi thứ sẽ hoạt động trơn tru.

Cả hai thuộc tính đều cần thiết và cũng kiểm tra lại tất cả các thành phần của biểu mẫu có thuộc tính "name". nếu bạn đang sử dụng khái niệm gửi biểu mẫu, thông thái khác chỉ cần sử dụng thẻ div thay vì phần tử biểu mẫu.

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

Trong trường hợp của tôi, lỗi xảy ra vì bên dưới trong phần đánh dấu html tồn tại thêm một dòng mà không có thuộc tính 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>

Nhưng trình duyệt vẫn báo cáo hàng đầu tiên có lỗi. Và thật khó để khám phá nguồn gốc của sai lầm nếu bạn có các yếu tố khác giữa hai điều này.

Khi bạn nhìn rõ giao diện điều khiển. Nó sẽ cho bạn hai ví dụ. Thực hiện bất kỳ trong số này.

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

hoặc là <input [(ngModel)]="person.firstName" name="first">

Tôi nhận thấy rằng công cụ dành cho nhà phát triển Chrome đôi khi chỉ gạch chân phần tử đầu tiên có màu đỏ lộng lẫy ngay cả khi nó được thiết lập chính xác với một tên. Điều này đã ném tôi đi một lúc.

Người ta phải chắc chắn thêm tên cho mọi thành phần trên biểu mẫu có chứa ngModel bất kể cái nào được gạch chân một cách nguệch ngoạc.

Nó khá dễ dàng để sửa chữa.

Đối với tôi, chúng tôi đã có nhiều hơn một đầu vào trong mẫu. Chúng ta cần cách ly lỗi đầu vào / dòng gây ra và chỉ cần thêm namethuộc tính. Điều đó đã khắc phục vấn đề cho tôi:

Trước:

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

Sau: tôi chỉ cần thêm namethuộc tính cho selectvà checkboxvà cố định vấn đề này. Như sau:

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

Như bạn thấy đã thêm namethuộc tính. Không cần thiết phải được cung cấp giống như ngModeltên của bạn . Chỉ cần cung cấp namethuộc tính sẽ khắc phục vấn đề.

Bạn cần nhập {NgForm} từ @ angular / Forms trong page.ts của bạn;

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

Trong Page.ts của bạn, triển khai chức năng của bạn để thao tác dữ liệu biểu mẫu:

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

Thử cái này...

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

Đối với tất cả những người không hoảng loạn với thông báo lỗi, nhưng chỉ cần tìm cách giải thích tại sao ví dụ từ đây không hoạt động (nghĩa là lọc động không xảy ra khi văn bản được nhập vào trường nhập): nó sẽ không hoạt động cho đến khi bạn sẽ thêm tham số tên trong trường đầu vào. Không có gì chỉ ra lời giải thích tại sao đường ống không hoạt động, nhưng thông báo lỗi chỉ đến chủ đề này và sửa nó theo câu trả lời được chấp nhận làm cho bộ lọc động hoạt động.

Bạn đã không đề cập đến phiên bản bạn đang sử dụng, nhưng nếu bạn đang sử dụng RC5 hoặc RC6, kiểu biểu mẫu "cũ" đó đã bị phản đối. Hãy xem hướng dẫn này để biết hướng dẫn về các kỹ thuật biểu mẫu "mới": https://angular.io/docs/ts/latest/guide/forms.html

Để có thể hiển thị thông tin theo mẫu bạn muốn, bạn cần cung cấp cho các đầu vào cụ thể của tên quan tâm. Tôi khuyên bạn nên có:

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

Đối với tôi, giải pháp rất đơn giản. Tôi đã thay đổi <form>thẻ thành một <div>và lỗi sẽ biến mất.

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

Đó là ba điều cần sử dụng ngModel trong một chỉ thị formgroup.

Lưu ý rằng cùng tên nên được sử dụng.