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

Question 1

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)

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

Question 2

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

Question 3

저도 같은 문제를 가지고 있었고, 문제는 내 아이 컴퍼넌트가했다고했다 @input라는 이름의 formControl.

그래서 다음과 같이 변경해야했습니다.

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

에:

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

ts :

@Input()
control:FormControl;

Question 4

Angular 7에서 사용자 지정 양식 컨트롤 구성 요소를 작성하는 동안에도이 오류가 발생했습니다. 그러나 Angular 7에는 해당하는 답변이 없습니다.

제 경우에는 @Component데코레이터에 다음을 추가해야했습니다 .

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

이것은 “왜 작동하는지 모르겠지만 작동합니다.”의 경우입니다. Angular 부분의 디자인 / 구현이 좋지 않다고 생각합니다.

Question 5

나는 또한 같은 오류, 각도 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}}

Question 6

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

Question 7

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

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

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

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

Question 8

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

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