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

다음은 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)

요소 스위치를 입력으로 변경하면 다른 컴포넌트와 동일한 구조를 사용하고 있고 정상적으로 작동한다는 것을 알고 작동합니다.

질문에 대한 의견 (2)
해결책

이 오류는 [(ngModel)] 속성을 가진 요소에 name="fieldName" ngDefaultControl 속성을 추가하여 수정했습니다.

해설 (2)

저도 같은 문제가 있었는데, 제 자식 컴포넌트에 'formControl'이라는 이름의 @input이 있다는 것이 문제였습니다.

그래서 저는 그냥

에서

ts:

@Input()
control:FormControl;
해설 (3)

또한 이를 받은 오류가 쓰는 동안 사용자 지정 양식을 제어 구성요소에서 모 7. 그러나 아무도 답은 적용 가능한 모난 7.

내 경우에는,다음과 같은 추가 될 필요는@구성 요소장식:

제공업체:[ { 제공:NG_VALUE_ACCESSOR, useExisting:forwardRef(()=>MyCustomComponent),//바꾸기 이름을 적절 multi:true } ]

이"I don't 알고 왜 그것은 작동하지 않습니다."그것을 분필로 설계/구현의 부분에 각.

해설 (0)

또한 같은 오류가,angular7


      {{city.name}}

나는 단지 추가ngDefaultControl


  {{city.name}}

</버>

해설 (0)

내 경우에,나는 삽입한[(ngModel)]에 라벨이 아닌 입력합니다. 또한 주의해야 할 점은,내가 노력 후 실행하고 올바르게 위에 오류가 지정된 라인을 하지만 오류가 되't 이동합니다. 이 있는 경우 다른 장소 당신이 최선을 다하고 동일한 실수를,그것은 여전히 던져 당신 같은 오류가에서 같은 줄을

해설 (0)

를 직면하고 있었는 이러 실행하는 동안 Karma 단위의 테스트 사례 추가MatSelectModule에서 수입 수정의 문제

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],
해설 (0)

나는 이 같은 오류가 나는 실수로 바인딩[(ngModel)]나의매트 형식의 필드대신에input요소입니다.

해설 (0)

이것은 다소 어리석은 일이지만 실수로 '[formGroup]대신 '[formControl]을 사용하여이 오류 메시지가 나타납니다. 여기를 참조하세요:

잘못된

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

  constructor(
    private formBuilder: FormBuilder
  ) { }

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

RIGHT

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

  constructor(
    private formBuilder: FormBuilder
  ) { }

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

당신을 이동하는[(ngModel)]div대신에switch에서 HTML? 나는 같은 오류가 표시에 나의 코드고 때문에 그것이 내가 행한 모델을<매트 옵션>대신에<매트 선택->. 하지만 나는 사용하지 않는 형태로 제어합니다.

해설 (0)

내 경우에는 사용되<ng 를 선택->directive,그러나지 않았't 을 가져온에서 나의 모듈이 있습니다.ts 파일입니다. 수입 수정할 수 있습니다.

해설 (0)

나는 같은 오류가,하지만 제 경우에는 분명히 그것은 동기화 문제에서는 순간의 렌더링은 구성 요소 html.

내가 다음에 일부의 솔루션을 제안이 페이지에서 그러나 그 어떤 일이 나에,적어도 완전하지 않습니다.

무엇을 했는 실제로 해결해 나 오류를 쓰고 아래 코드 조각을 내 아버지의 html 태그의 요소입니다.

나는 바인딩을 변수입니다.

코드:

    *ngIf="variable-name"

오류가 발생,분명히 프로젝트를 렌더링하기 위해 노력하고,페이지 분명히 에서는 순간의 평가하는 변수 프로젝트 수 없이 그 값을 찾을 수 있습니다. 위의 코드는지 확인하는 렌더링하기 전에 페이지를 요청할 경우에는 변수 초기화.

이것은 나의 구성 요소입니다.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">
             ...

이 도움이 될 수 있습니다.

해설 (1)

나는 이 같은 오류가 입력 필드에 이름이통제에 사용자 정의 형태로 구성 하지만 실수로 통과 제어에 입력된formControl. 희망이 없다 하나의 얼굴하는 문제입니다.

해설 (0)