Oto mój komponent w 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>
`
} )
Oto moja klasa:
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;
}
}
Oto błąd, który otrzymuję podczas kompilacji:
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)
Kiedy zmieniam przełącznik elementu na wejście, to działa, wiedząc, że używam tej samej struktury do innych komponentów i działa dobrze.
angular
form-control
Pozwać
źródło
źródło
ControlValueAccessor
- Nigdy więcej nie daj się pomylić podczas wdrażania ControlValueAccessor w formach kątowychOdpowiedzi:
Naprawiłem ten błąd, dodając
name="fieldName" ngDefaultControl
atrybuty do elementu, który zawiera[(ngModel)]
atrybut.źródło
ngDefaultControl
na przykład znalazłeś dokumentację ?name="fieldname"
nie jest to konieczne, alengDefaultControl
rozwiązuje problem.Miałem ten sam problem, a problem polegał na tym, że mój komponent podrzędny miał
@input
nazwanyformControl
.Musiałem więc tylko zmienić:
do:
ts:
źródło
Otrzymałem również ten błąd podczas pisania niestandardowego komponentu kontroli formularza w Angular 7. Jednak żadna z odpowiedzi nie ma zastosowania do Angular 7.
W moim przypadku do
@Component
dekoratora należało dodać :To jest przypadek „Nie wiem, dlaczego to działa, ale działa”. Określić to kiepskim projektem / wdrożeniem ze strony Angulara.
źródło
Miałem też ten sam błąd, kątowy 7
Właśnie dodałem ngDefaultControl
źródło
Miałem ten sam błąd - przypadkowo przywiązałem [(ngModel)] do mojego
mat-form-field
zamiastinput
elementu.źródło
Otrzymałem ten komunikat o błędzie w moich testach jednostkowych z Jasmine. Dodałem ngDefaultControl atrybut elementu niestandardowego (w moim przypadku to był kanciasty materiał przełącznik suwakowy) i to rozwiąże problem.
Zmień powyższy element, aby zawierał atrybut ngDefaultControl
źródło
Napotkałem ten błąd podczas uruchamiania przypadków Karma Unit Test Dodanie MatSelectModule w imporcie rozwiązuje problem
źródło
To trochę głupie, ale otrzymałem ten komunikat o błędzie przez przypadkowe użycie
[formControl]
zamiast[formGroup]
. Spójrz tutaj:ŹLE
@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: '' }) } }
DOBRZE
@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: '' }) } }
źródło
W moim przypadku wstawiłem [(ngModel)] na etykiecie, a nie na wejściu. Jest też zastrzeżenie, próbowałem uruchomić poprawnie powyższy błąd we wskazanym wierszu, ale błąd nie zniknął. Jeśli są inne miejsca, w których popełniłeś ten sam błąd, nadal rzuca ci ten sam błąd w tej samej linii
źródło
W moim przypadku użyłem dyrektywy, ale nie zaimportowałem jej do mojego pliku module.ts. Import naprawił to.
źródło
ng serve
aby odświeżyć importMiałem ten sam błąd, miałem pole wejściowe nazwane
control
w moim niestandardowym komponencie formularza, ale przypadkowo przekazałem kontrolę w danych wejściowych o nazwieformControl
. Mam nadzieję, że nikt nie napotka tego problemu.źródło
W moim przypadku było to tak głupie, jak zarejestrowanie nowego komponentu dla DI w moich
app.module.ts
deklaracjach, ale nie w eksporcie.źródło
W moim przypadku dzieje się to w moim udostępnionym module i musiałem dodać do @NgModule:
źródło
Otrzymałem również ten błąd, gdy nazwałem jeden z moich danych wejściowych komponentu „formControl”. Prawdopodobnie jest zarezerwowany na coś innego. Jeśli chcesz przekazać obiekt FormControl między komponentami, użyj go w ten sposób:
nie tak jak to:
Dziwne - ale działa :)
źródło
Miałem ten sam błąd, ale w moim przypadku najwyraźniej był to problem z synchronizacją, w momencie renderowania komponentów html.
Postępowałem zgodnie z niektórymi rozwiązaniami zaproponowanymi na tej stronie, ale którekolwiek z nich zadziałało, przynajmniej nie do końca.
To, co faktycznie rozwiązało mój błąd, to napisanie poniższego fragmentu kodu wewnątrz tagu ojca html elementów.
Byłem związany ze zmienną.
Kod:
Błąd był spowodowany najwyraźniej próbą wyrenderowania strony przez projekt, najwyraźniej w momencie oceny zmiennej projekt po prostu nie mógł znaleźć jej wartości. Dzięki powyższemu fragmentowi kodu upewnij się, że przed wyrenderowaniem strony zapytasz, czy zmienna została zainicjowana.
To jest mój kod component.ts:
Oto moje znaczniki HTML:
Mam nadzieję, że to może być pomocne.
źródło
Czy próbowałeś przenieść swój plik
[(ngModel)]
dodiv
zamiastswitch
w HTML? W moim kodzie pojawił się ten sam błąd, ponieważ powiązałem model z a<mat-option>
zamiast a<mat-select>
. Chociaż nie używam kontroli formularzy.źródło
W moim przypadku był to element component.member, który nie istniał np
Dodanie go do deklaracji klasy naprawiło to
źródło
W moim przypadku błąd został wywołany przez zduplikowanie importu komponentu w module.
źródło
#Tło
W moim przypadku błąd został wywołany przez zmianę tagu elementu z na błąd. Wewnątrz <TextView an [(ngModel)] = "nazwa". została zdefiniowana.
Po usunięciu błędu [(ngModel)] = "nazwa" zniknął.
źródło
Miałem do czynienia z tym problemem podczas przeprowadzania testów jednostkowych. Aby to naprawić, dodałem MatSlideToggleModule do importu w moim pliku spect.ts.
źródło
w moim przypadku miałem
<TEXTAREA>
tag ze starego html podczas konwersji na kątowy. Musiałem się zmienić<textarea>
.źródło
Ten błąd występuje również, jeśli spróbujesz dodać ngModel do elementów innych niż wejściowe, takich jak opcje menu rozwijanego lub przycisku radiowego. W moim przypadku dodałem ngModel do opcji ion-select zamiast ion-select.
źródło