Angular2 ngModel이 양식 태그 내에서 사용되는 경우 name 속성을 설정하거나 양식을 지정해야합니다.


216

Angular 2 에서이 오류가 발생합니다.

core.umd.js : 5995 예외 : 잡히지 않음 (약속) : 오류 : app / 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()">

2
답변 중 하나를 정답으로 수여하는
cosider

답변:


420

ngForm을 사용 하는 경우 값 [(ngModel)]=""이있는 속성 이름 이 있어야 하는 모든 입력 필드입니다 .

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


1
name 속성은 고유 한 값을 가져야합니까?
Alexander Mills

2
Angular 5 문서 ( angular.io/guide/forms )에서 : "[(ngModel)]을 양식과 함께 사용하려면 이름 속성을 정의해야합니다."
elshev

2
Angular 7에도 적용 가능!
coderpc 2019

2
ngModel이 이름보다 먼저 오는 경우에만 작동한다고 덧붙이고 싶습니다.
로널드 아벨라 노 19

55

모든 개발자가 공통적 인 습관을 가지고 있기 때문에 전체 오류를 읽지 말고 첫 번째 줄을 읽고 다른 사람의 답변을 찾기 시작하십시오. :) :) 나는 또한 그들 중 하나입니다.

오류를 읽고 명확하게 말합니다.

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

이 오류를 더 이해해야하는 것은 무엇입니까?

하나의 옵션을 사용하면 모든 것이 원활하게 작동합니다.


25
각 대안의 의미 / 효과에 대한 설명이 유용 할 것입니다. 두 가지 중 하나를 임의로 선택하는 것은 좋은 생각처럼 보이지 않습니다.
Michael

2
사랑해 :)))))
롤라

1
여기에 대한 좋은 설명이 있습니다 [ngModelOptions]="{standalone: true}: stackoverflow.com/a/38368261/3135317 . 필자의 경우 중첩 된 배열에 대해 * ngFor *가있을 때 ngModel이 양식 태그에 사용됩니다. 모델 바인딩은 훌륭했고 템플릿은 바프되었습니다. "예제 1" 은 작동 하지 않습니다 . "예제 2"는 완벽했습니다.
FoggyDay

)이 대답은 (는 분명히 처음 스틱하지 않았다) 같은 주에 두 번 절 도와 줬어요
제이 커민스

30

두 속성이 모두 필요하며 모든 양식 요소에 "name"속성이 있는지 다시 확인하십시오. 양식 제출 개념을 사용하는 경우 다른 방법으로 양식 요소 대신 div 태그를 사용하십시오.

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

30

내 경우에는 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>

그러나 브라우저는 여전히 첫 번째 행에 오류가 있다고보고합니다. 그리고이 둘 사이에 다른 요소가 있다면 실수의 원인을 찾기가 어렵습니다. 여기에 이미지 설명을 입력하십시오


16

콘솔을 명확하게 살펴보면 두 가지 예가 표시됩니다.

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

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


16

Chrome 개발자 도구는 이름을 올바르게 설정하더라도 첫 번째 요소에만 빨간색으로 밑줄을 긋는 경우가 있습니다. 이것은 잠시 동안 나를 버렸다.

하나는 추가해야합니다 이름 으로 모든 관계없이 하나가 구불 구불 한 밑줄이있는 ngModel이 들어있는 양식 요소입니다.


9

수정하기가 매우 쉽습니다.

저에게는 양식에 둘 이상의 입력이있었습니다. 오류를 유발하는 입력 / 줄을 분리하고 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속성을 제공 하면 문제가 해결됩니다.


3

page.ts의 @ angular / forms에서 {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);}

3

이 시도...

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

3

오류 메시지 자체에 당황 하지 않고 여기 에서 예제 가 작동하지 않는 이유를 설명하기 위해 인터넷 검색을하는 모든 사람들에게 (예 : 텍스트가 입력 필드에 입력되면 동적 필터링이 수행되지 않음) 작동하지 않습니다. 입력 필드에 이름 매개 변수를 추가 할 때까지 파이프가 작동하지 않는 이유에 대한 설명은 없지만 오류 메시지는이 주제를 가리키며 허용 된 답변에 따라이를 수정하면 동적 필터가 작동합니다.



2

원하는 형식으로 정보를 표시하려면 해당 특정 입력 이름을 지정해야합니다. 나는 당신이 가진 것이 좋습니다 :


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

2

나에게 해결책은 매우 간단했다. <form>태그를 a로 변경하면 <div>오류가 사라집니다.


1
양식을 제거하고 있기 때문에 양식에서 제공하는 모든 기능을 제거하기 때문입니다.
astro8891

@ astro8891 저에게 필요한 기능이 없습니다
John Henckel

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

이것들은 formGroup 지시어 안에서 ngModel을 사용해야하는 세 가지입니다.

동일한 이름을 사용해야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.