다음은 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)
요소 스위치를 입력으로 변경하면 다른 컴포넌트와 동일한 구조를 사용하고 있고 정상적으로 작동한다는 것을 알고 작동합니다.
이 오류는 [(ngModel)]
속성을 가진 요소에 name="fieldName" ngDefaultControl
속성을 추가하여 수정했습니다.
저도 같은 문제가 있었는데, 제 자식 컴포넌트에 'formControl'이라는 이름의 @input
이 있다는 것이 문제였습니다.
그래서 저는 그냥
<my-component [formControl]="formControl"><my-component/>
에서
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
또한 이를 받은 오류가 쓰는 동안 사용자 지정 양식을 제어 구성요소에서 모 7. 그러나 아무도 답은 적용 가능한 모난 7.
내 경우에는,다음과 같은 추가 될 필요는@구성 요소
장식:
제공업체:[ { 제공:NG_VALUE_ACCESSOR, useExisting:forwardRef(()=>MyCustomComponent),//바꾸기 이름을 적절 multi:true } ]
이"I don't 알고 왜 그것은 작동하지 않습니다."그것을 분필로 설계/구현의 부분에 각.
또한 같은 오류가,angular7
<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}}
</버>
이것은 다소 어리석은 일이지만 실수로 '[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: ''
})
}
}
나는 같은 오류가,하지만 제 경우에는 분명히 그것은 동기화 문제에서는 순간의 렌더링은 구성 요소 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">
...
이 도움이 될 수 있습니다.