오류 오류:스위치에 지정되지 않은 이름 특성을 가진 양식 제어를 위한 값 접근자가 없습니다.

오류 오류:스위치에 지정되지 않은 이름 특성을 가진 양식 제어를 위한 값 접근자가 없습니다.

다음은 내 Angular 구성 요소입니다.

@Component( {
    selector: 'input-extra-field',
    template: `
            <div class="form-group" [formGroup]="formGroup" >
                <switch [attr.title]="field.etiquette" 
                    [attr.value]="field.valeur" [(ngModel)]="field.valeur"
                    [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
                </switch>
                <error-messages [control]="name"></error-messages>
            </div>
    `
} )

내 수업은 다음과 같습니다.

export class SwitchExtraField extends ExtraField {
    @Input() field: ExtraFormField;
    @Input() entity: { fields: Object };
    @Input() formGroup: FormGroup;

    constructor( formDir: NgForm ) {
        super( null, null, formDir );
    }

    get disabled(): string {
        if ( this.field && !!this.field.saisissable && !this.field.saisissable )     {
            return 'disabled';
        }
        return null;
    }
}

컴파일할 때 나타나는 오류는 다음과 같습니다.

ERROR Error: No value accessor for form control with unspecified name attribute
  at _throwError (forms.es5.js:1918)
  at setUpControl (forms.es5.js:1828)
  at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

입력을 위해 요소 스위치를 변경하면 다른 구성 요소와 동일한 구조를 사용하고 있으며 정상적으로 작동합니다.

▁the▁by▁adding를 추가하여 이 했습니다.name="fieldName" ngDefaultControl다을 전요대속성한소에를 전달하는 에 대한 [(ngModel)]기여하다.

저도 같은 문제가 있었는데 문제는 제 아이 구성 요소가@input이름 지어진formControl.

그래서 저는 다음과 같이 변경하기만 하면 되었습니다.

<my-component [formControl]="formControl"><my-component/>

대상:

<my-component [control]="control"><my-component/>

ts:

@Input()
control:FormControl;

Angular 7에서 커스텀 폼 컨트롤 구성 요소를 작성하는 동안에도 이 오류가 발생했습니다.그러나 Angular 7에 해당하는 답은 없습니다.

저의 경우, 다음 사항을 추가해야 했습니다.@Component장식자:

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),  // replace name as appropriate
      multi: true
    }
  ]

이것은 "왜 효과가 있는지 모르겠지만 효과가 있습니다."의 경우입니다.Angular 측의 잘못된 설계/구현 탓으로 돌립니다.

저도 같은 오류가 있었어요, 각 7.

 <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  class="dropdown-item fontstyle"
     *ngFor="let city of Cities; let i = index">
      {{city.name}}
 </button>

방금 ngDefaultControl을 추가했습니다.

   <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  ngDefaultControl class="dropdown-item fontstyle"
 *ngFor="let city of Cities; let i = index">
  {{city.name}}

Karma Unit 테스트 사례를 실행하는 동안 이 오류가 발생했습니다. 가져오기에 MatSelectModule을 추가하면 문제가 해결됩니다.

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],

재스민과의 유닛 테스트에서 이 오류 메시지를 받았습니다.ngDefaultControl 특성을 사용자 지정 요소(내 경우 각진 재료 슬라이드 토글)에 추가하면 오류가 해결됩니다.

<mat-slide-toggle formControlName="extraCheese">
  Extra Cheese
</mat-slide-toggle>

ngDefaultControl 특성을 포함하도록 위 요소를 변경합니다.

<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
 Extra Cheese
</mat-slide-toggle>

또한 구성 요소 입력 중 하나를 'formControl'로 명명했을 때 이 오류가 발생했습니다.아마도 다른 것을 위해 예약된 것 같습니다.구성 요소 간에 FormControl 개체를 전달하려면 다음과 같이 사용합니다.

@Input() control: FormControl;

이런 식이 아닙니다.

@Input() formControl: FormControl;

이상해요 - 하지만 일하는 중이에요 :)

나의 경우, 나는 추가하는 것을 잊었습니다.providers: [INPUT_VALUE_ACCESSOR] 사용자 구성 요소로

다음과 같이 INPUT_VALUE_ACCESSOR를 생성했습니다.

export const INPUT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextEditorComponent),
  multi: true,
};

또는 과 수 ngModel 또는 할 때 합니다.<div>원소의

ngModel 또는 formControl을 다음과 같이 사용하면 문제가 발생합니다.

<div [(ngModel)]="myModel"> <--- wrong place
    <input type="text" />
</div>

솔루션:

<div>
    <input type="text" [(ngModel)]="myModel" /> <--- correct place
</div>

출처: https://github.com/angular/angular/issues/43821#issuecomment-992305494

. 을(를) 제 동일오발습다니생에 바인딩했습니다. 실수로 [(ngModel)]을(를) 내 시스템에 바인딩했습니다.mat-form-field input원소의

나의 경우 문제는 내가 만든 것이었습니다.@Input된 이름을 입니다.formControl.

저의 경우 디렉티브를 사용했지만 module.ts 파일에 가져오지 않았습니다.가져오기 수정됨.

이건 좀 바보같지만, 실수로 이 오류 메시지를 받았습니다.[formControl]에 [formGroup]다음을 참조:

틀렸어

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE -->
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

맞다

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formGroup]="formGroup"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE -->
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

저의 경우, 공유 모듈에서 이 문제가 발생하여 다음 사항을 @NgModule에 추가해야 했습니다.

...
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule
  ],
...

저의 경우 입력이 아닌 라벨에 [(ngModel)]을 삽입했습니다.주의 사항도 있습니다, 지정된 줄에서 위의 오류가 발생한 후 올바르게 실행하려고 했지만 오류가 발생하지 않았습니다.동일한 실수를 저지른 다른 장소가 있는 경우에도 동일한 행에 동일한 오류가 발생합니다.

이 오류는 다음과 같은 비입력 요소에 ngModel을 추가하려고 할 때도 발생합니다.<option>HTML 태.ngModel에만 하십시오.<input> 하였습니다. 나의 경우, 나는 angModel을 추가했습니다.<ion-select-option>에 <ion-select>.

저는 다음과 같은 매트 셀렉트에서 폼 컨트롤을 사용했습니다.

<mat-select [formControl]="control">
 ...
</mat-select>

그리고 저는 MatSelectModule이 스펙 파일에 Import되지 않았다는 것을 알게 되어 문제를 해결했습니다.

만약 이것이 누군가에게 도움이 된다면, 나는 선택의 옵션 태그 안에 ngModel이 있었기 때문에 이 오류가 발생한 것입니다.

내 실수로, 나는 이것을 가지고 있었습니다.

<select class="form-control">
    <option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" [(ngModel)]="dependent.state">{{mystate.stateName}}</option>
</select>

이 대신:

<select class="form-control" [(ngModel)]="dependent.state">
    <option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" >{{mystate.stateName}}</option>
</select>

"formControl"은 AngularForms에 의해 예약된 이름인 것 같습니다. 이 이름을 구성 요소에 대한 입력으로 사용했을 때 실제 컨트롤에서 예기치 않은 동작이 발생했습니다.제게 묻는다면, 이것은 Angular bug입니다.입력 이름을 "frmCtrl" 같은 다른 이름으로 바꾸기만 하면 작동합니다.

저도 같은 오류가 있었습니다. 저는 이름이 붙은 입력 필드가 있었습니다.control로 사자지 양구요성소실서에수이라는 이름의 이었습니다.formControl아무도 그 문제에 직면하지 않기를 바랍니다.

저의 경우 DI에 대한 새로운 구성 요소를 등록한 것만큼 멍청했습니다.app.module.ts수출이 아닌 신고.

사용자 지정 컨트롤도 만들었습니다.
다음은 이 문제를 해결한 방법입니다.

constructor(
  @Optional() @Self()
  readonly ngControl: NgControl,
) {
  this.ngControl.valueAccessor = this;
}

저도 같은 오류가 있었지만, 제 경우는 구성 요소를 html로 렌더링하는 순간 동기화 문제였던 것 같습니다.

저는 이 페이지에서 제안된 솔루션 중 일부를 따랐지만, 그 중 어떤 솔루션도 제대로 작동하지 않았습니다.

실제로 제 오류를 해결한 것은 요소의 아버지 html 태그 안에 아래 코드 스니펫을 작성한 것입니다.

저는 변수에 구속력이 있었습니다.

코드:

    *ngIf="variable-name"

오류가 발생한 것은 프로젝트가 페이지를 렌더링하려고 시도했기 때문인 것 같습니다. 변수를 평가하는 순간 프로젝트가 값을 찾을 수 없었던 것 같습니다.위의 코드 조각을 사용하면 페이지를 렌더링하기 전에 변수가 초기화되었는지 확인할 수 있습니다.

다음은 내 component.ts 코드입니다.

import { Component, OnInit } from '@angular/core';
import { InvitationService } from 'src/app/service/invitation.service';
import { BusinessService } from 'src/app/service/business.service';
import { Invitation } from 'src/app/_models/invitation';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-invitation-details',
  templateUrl: './invitation-details.component.html',
  styleUrls: ['./invitation-details.component.scss']
})
export class InvitationDetailsComponent implements OnInit {
  invitationsList: any;
  currentInvitation: any;
  business: any;
  invitationId: number;
  invitation: Invitation;

  constructor(private InvitationService: InvitationService, private BusinessService: 
BusinessService) { 
this.invitationId = 1; //prueba temporal con invitacion 1
this.getInvitations();
this.getInvitationById(this.invitationId);
  }

   ngOnInit() {

  }

  getInvitations() {
    this.InvitationService.getAllInvitation().subscribe(result => {
      this.invitationsList = result;
      console.log(result);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  getInvitationById(invitationId:number){
    this.InvitationService.getInvitationById(invitationId).subscribe(result => {
      this.currentInvitation = result;
      console.log(result);
      //this.business=this.currentInvitation['business'];
       //console.log(this.currentInvitation['business']); 
     }, error => {
     console.log(JSON.stringify(error));
    });
  }
      ...

제 HTML 마크업은 다음과 같습니다.

<div class="container-fluid mt--7">
  <div class="row">
    <div class="container col-xl-10 col-lg-8">
      <div class="card card-stats ">
        <div class="card-body container-fluid form-check-inline" 
         *ngIf="currentInvitation">
          <div class="col-4">
             ...

이것이 도움이 되기를 바랍니다.

이동을 시도해 보셨습니까?[(ngModel)]에게div대신에switchHTML에 있습니까?코드에 동일한 오류가 표시되었으며 모델을 다음과 같이 바인딩했기 때문입니다.<mat-option>대신에<mat-select>폼 컨트롤을 사용하지 않지만,

나의 경우, 그것은 존재하지 않는 구성 요소.멤버였습니다.

[formControl]="personId"

클래스 선언에 추가 수정

this.personId = new FormControl(...)

저는 유닛 테스트를 진행하는 동안 이 문제에 직면했습니다.수정하기 위해 저는 spec.ts 파일의 가져오기에 MatSlideToggleModule을 추가했습니다.

module.ts에서 forms module을 가져오기만 하면 되는 동일한 오류가 발생했습니다.

import { FormsModule } from '@angular/forms';
    
@NgModule({
    imports: [FormsModule]
)}

저의 경우 모듈에서 구성 요소 가져오기를 복제하여 오류가 발생했습니다.

#배경

• 네이티브 스크립트 6.0

저의 경우, 요소 태그를 에서 로 변경하여 오류가 발생했습니다.내부 <TextView an [(ng 모델)]="이름"이 정의되었습니다.

[(ngModel)]을(를) 제거한 후="name" 오류가 없습니다.

각도 편집기를 통합하려고 할 때도 같은 문제에 직면해 있습니다.

다음을 추가하여 해결합니다.[ngModelOptions]="{standalone: true}"내 꼬리표에.

<angular-editor [ngModelOptions]="{standalone: true}" [(ngModel)]="htmlContent" [config]="config"></angular-editor>

가장 빠른 솔루션 참조가 되었으면 합니다.

언급URL : https://stackoverflow.com/questions/46422007/error-error-no-value-accessor-for-form-control-with-unspecified-name-attribute