오류 오류 : 스위치에 지정되지 않은 이름 속성이있는 양식 제어에 대한 값 접근자가 없습니다.

Angular 4의 구성 요소는 다음과 같습니다.

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

요소 스위치를 입력으로 변경하면 다른 구성 요소에 동일한 구조를 사용하고 있으며 잘 작동한다는 것을 알면 작동합니다.

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

이 같은 오류가 발생했습니다. 실수로 [(ngModel)]을 요소 mat-form-field대신에 바인딩했습니다 input.

Jasmine을 사용한 단위 테스트에서이 오류 메시지가 표시되었습니다. 사용자 정의 요소 에 ngDefaultControl 속성을 추가 했습니다 (내 경우에는 각도 재질 슬라이드 토글). 그러면 오류가 해결됩니다.

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

ngDefaultControl 속성 을 포함하도록 위의 요소를 변경하십시오.

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

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

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

이것은 일종의 어리석은 일이지만 실수로 [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: ''
    })
  }
}

제 경우에는 입력이 아닌 레이블에 [(ngModel)]을 삽입했습니다. 또한 경고가 있습니다. 지정된 줄에서 위의 오류를 올바르게 실행하려고 시도했지만 오류가 발생하지 않습니다. 같은 실수를 저지른 다른 곳이 있으면 같은 줄에 같은 오류가 발생합니다.

제 경우에는 지시문을 사용했지만 module.ts 파일에서 가져 오지 않았습니다. 가져 오기가 수정되었습니다.

이 같은 오류가 발생 control했습니다. 사용자 지정 양식 구성 요소에 입력 필드가 있지만 실수로라는 입력에 제어를 전달했습니다 formControl. 아무도 그 문제에 직면하지 않기를 바랍니다.

제 경우에는 DI에 대한 새 구성 요소를 내 app.module.ts선언에 등록했지만 수출 에는 등록 하지 않은 것만 큼 ​​멍청했습니다 .

제 경우에는 공유 모듈에서 발생하며 @NgModule에 다음을 추가해야했습니다.

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

또한 구성 요소 입력 중 하나를 'formControl'이라고 명명 할 때이 오류가 발생했습니다. 아마도 그것은 다른 것을 위해 예약되어있을 것입니다. 구성 요소간에 FormControl 개체를 전달하려면 다음과 같이 사용하십시오.

@Input() control: FormControl;

이건 아니야:

@Input() formControl: FormControl;

이상하지만 작동 :)

나는 같은 오류가 있었지만 내 경우에는 구성 요소를 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대신의 switch당신의 HTML에? 저도 같은 오류가 내 코드에 표시했고, 나는에 모델을 결합 때문이었다 <mat-option>대신의 <mat-select>. 양식 제어를 사용하지 않지만.

제 경우에는 존재하지 않는 component.member였습니다.

[formControl]="personId"

클래스 선언에 추가하면 수정되었습니다.

this.personId = new FormControl(...)

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

#배경

• NativeScript 6.0

제 경우에는 요소 태그를 오류로 변경하여 오류가 발생했습니다. <TextView an [(ngModel)] = "name"내부. 정의되었습니다.

제거 후 [(ngModel)] = "name"오류가 사라졌습니다.

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

제 경우에는 <TEXTAREA>각도로 변환하는 동안 이전 html 의 태그가 있습니다. 로 변경해야했습니다 <textarea>.

이 오류는 드롭 다운 또는 라디오 버튼 옵션과 같은 비 입력 요소에 ngModel을 추가하려고 할 때도 발생합니다. 제 경우에는 ion-select 대신 ion-select-option에 ngModel을 추가했습니다.