Поэтому я последовал за учебником о том, как добавить recaptcha в форму для предотвращения спама. Я выполнил все шаги, но я все еще получаю следующую ошибку:
error inside log Error: No value accessor for form control with name: 'captcha'
at _throwError (forms.js:2139)
at setUpControl (forms.js:2008)
at FormGroupDirective.addControl (forms.js:5144)
at FormControlName._setUpControl (forms.js:5743)
at FormControlName.ngOnChanges (forms.js:5684)
at checkAndUpdateDirectiveInline (core.js:11642)
at checkAndUpdateNodeInline (core.js:13252)
У меня есть реактивная форма регистрации, где у меня есть следующий элемент, который должен быть captcha и formControl. К сожалению, я ничего не вижу.
<div nbRecaptcha key="6LfNfHYUAAAAAFaa7dVi2au1tnfod-2eR3Rb2enM" formControlName="captcha"></div>
Это директива nbRecaptcha:
declare const grecaptcha: any;
declare global {
interface Window {
grecaptcha: any;
reCaptchaLoad: () => void
}
}
@Directive({
selector: '[nbRecaptcha]',
providers: [ReCaptchaAsyncValidator]
})
export class RecaptchaDirective implements OnInit, ControlValueAccessor, AfterViewInit {
@Input() key: string;
@Input() config: ReCaptchaConfig = {};
@Input() lang: string;
private control: FormControl;
private onChange: ( value: string ) => void;
private onTouched: ( value: string ) => void;
private widgetId: number;
constructor(
private element: ElementRef,
private ngZone: NgZone,
private injector: Injector,
private reCaptchaAsyncValidator: ReCaptchaAsyncValidator){}
ngOnInit() {
this.registerReCaptchaCallback();
this.addScript();
}
ngAfterViewInit() {
this.control = this.injector.get(NgControl).control;
this.setValidator();
}
addScript() {
let script = document.createElement('script');
const lang = this.lang ? '&hl=' + this.lang : '';
script.src = 'https://www.google.com/recaptcha/api.js?onload=reCaptchaLoad&render=explicit${lang}';
script.async = true;
script.defer = true;
document.body.appendChild(script);
}
// We need to notify the formControl that its valid if we get the token
// from the onSuccess function or that its invalid if the onExpired function is called.
onExpired() {
this.ngZone.run(() => {
this.onChange(null);
this.onTouched(null);
});
}
onSuccess( token: string ) {
this.ngZone.run(() => {
this.verifyToken(token);
this.onChange(token);
this.onTouched(token);
});
}
// these are the three methods that controlValueAccessor requires
writeValue( obj: any ): void {
}
registerOnChange( fn: any ): void {
this.onChange = fn;
}
registerOnTouched( fn: any ): void {
this.onTouched = fn;
}
private setValidator() {
this.control.setValidators(Validators.required);
this.control.updateValueAndValidity();
}
registerReCaptchaCallback() {
window.reCaptchaLoad = () => {
const config = {
...this.config,
'sitekey': this.key,
'callback': this.onSuccess.bind(this),
'expired-callback': this.onExpired.bind(this)
};
this.widgetId = this.render(this.element.nativeElement, config);
};
}
private render( element: HTMLElement, config ): number {
return grecaptcha.render(element, config);
}
verifyToken( token : string ) {
this.control.setAsyncValidators(this.reCaptchaAsyncValidator.validateToken(token))
this.control.updateValueAndValidity();
}
}
И компонент компонента регистрации:
this.mySignupForm = new FormGroup({
captcha: new FormControl()
});
Может ли кто-нибудь увидеть, что я сделал неправильно?
Ошибка No value accessor for form control with name: 'captcha'
. Это можно решить, добавив директиву/управление в список всех доступных NG_VALUE_ACCESSOR
с помощью forwardRef
. Вы эффективно расширяете мульти-провайдер для NG_VALUE_ACCESSOR
чтобы эта директива могла получить доступ к ControlValueAccessor
.
@Directive({
selector: '[nbRecaptcha]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RecaptchaDirective),
multi: true
},
ReCaptchaAsyncValidator
]
})
Вот в основном рабочий пример с устранением конкретной ошибки. Мне пришлось удалить некоторые пользовательские классы/конфигурации, которые у вас были в вашем примере, поскольку я не знал о их точной реализации.
Я не мог найти официальную документацию для создания настраиваемых элементов управления, но есть несколько твердых статей, в которых обсуждается создание настраиваемых элементов управления, которые ссылаются на эту необходимую регистрацию.
Надеюсь, это поможет!