Angular2 폼 태그 내에서 fgModel을 사용하는 경우 이름 속성을 설정하거나 폼을 설정해야 합니다.

Angular2 폼 태그 내에서 fgModel을 사용하는 경우 이름 속성을 설정하거나 폼을 설정해야 합니다.

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

core.umd.js:5995 예외:잡히지 않음(약속):오류: 다음으로 인해 app/model_exposure_curones/model_exposure_curones.component.html:57:18에 오류가 발생했습니다. ngModel을 폼 태그 내에서 사용하는 경우 이름 특성을 설정하거나 폼 컨트롤을 ngModelOptions에서 '독립 실행형'으로 정의해야 합니다.

예 1:

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

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

독립 실행형

설정별[ngModelOptions]="{standalone: true}"하나는 Angular에게 다음과 같은 것을 말합니다, 폼을 무시하거나.ngForm에 그냥 묶습니다.firstname변수로 부탁합니다.

하지만, 만약에form-태그가 실수로 사용되었습니다(때때로 저의 경우처럼), 변경되었습니다.form로.div다른 옵션입니다(그러나 스타일이 필요하지 않은 경우에만 해당).form-tag).

모든 개발자들은 완전한 오류를 읽는 것이 아니라 공통적인 습관을 가지고 있기 때문에, 첫 줄을 읽고 다른 사람의 답을 찾기 시작하세요:):) 저도 그들 중 한 명이기 때문에 여기에 있습니다.

오류를 읽고 다음과 같이 분명히 말합니다.

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

이 오류를 이해하려면 무엇이 더 필요합니까?

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

저의 경우 아래 html 마크업에서 이름 속성이 없는 줄이 하나 더 있었기 때문에 오류가 발생했습니다.

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

그러나 브라우저는 여전히 첫 번째 행에 오류가 있다고 보고합니다.그리고 이 둘 사이에 다른 요소가 있다면 실수의 근원을 발견하기가 어렵습니다.

두 가지 속성이 모두 필요하며 모든 양식 요소에 "name" 속성이 있는지 다시 확인합니다.폼 제출 개념을 사용하는 경우 폼 요소 대신 div 태그를 사용합니다.

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

Chrome developer tool이 이름으로 올바르게 설정되어 있더라도 때때로 첫 번째 요소에 빨간색으로 밑줄을 긋는 경우가 있다는 것을 알게 되었습니다.이것은 저를 잠시 당황하게 했습니다.

ngModel이 포함된 폼의 모든 요소에 이름을 추가해야 합니다. ngModel에 밑줄이 그어진 요소에 관계없이.

콘솔을 명확하게 보면 두 가지 예를 볼 수 있습니다.다음 중 하나를 구현합니다.

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

또는

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

고치기에는 꽤 쉽습니다.

저는 양식에 두 개 이상의 입력이 있었습니다.해서 오류를 시키는 것을 분리하고 오를라유입력/인을분리고합을 .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속성으로 문제를 해결할 수 있습니다.

페이지의 @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);}

오류 메시지 자체에 당황하지 않고 여기서 예제가 작동하지 않는 이유(즉, 텍스트를 입력 필드에 입력할 때 동적 필터링이 발생하지 않음)를 구글링하는 모든 사용자에게 적합합니다. 입력 필드에 이름 매개 변수를 추가할 때까지 작동하지 않습니다.파이프가 작동하지 않는 이유에 대한 설명은 없지만 오류 메시지가 이 항목을 가리키고 승인된 답변에 따라 수정하면 동적 필터가 작동합니다.

해보세요...

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

현재 사용 중인 버전은 언급하지 않았지만, 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>에 꼬리표를 달다.<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" 

formGroup 디렉티브 내에서 ngModel을 사용하기 위해 필요한 세 가지 사항입니다.

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

독립 실행형 추가: 다음과 같은 참 모델 필드

 <mat-radio-group [(ngModel)]="gender" [ngModelOptions]="{standalone: true}">
                            <mat-radio-button value="Male">Male</mat-radio-button>    
                            <mat-radio-button value="Female">Female</mat-radio-button>  
                        </mat-radio-group>

언급URL : https://stackoverflow.com/questions/39313095/angular2-if-ngmodel-is-used-within-a-form-tag-either-the-name-attribute-must-be