ControlValueAccessor interface?

[achimha]

Would it make sense to have the component implement the ControlValueAccessor interface and behave like a form control? Then we could get the captcha response as value from the form and assign it the required attribute.

What do you think?

[xmaestro]

Sounds like a good idea. :+1:

[xmaestro]

@achimha Any update on this?

[budkin76]

+1 for form validation integration.

[achimha]

I've created a PR: https://github.com/xmaestro/angular2-recaptcha/pull/51

Needs some more testing before merging.

[xmaestro]

@achimha I think i made a premature merge. When i tested it did not give me value for ngModel binding and also change event does not trigger.

[xmaestro]

@achimha I tested it again and ngModel seems to work but change event does not work. But I was wondering whether we really need change and blur events. What do you think? I'm ready to publish if we only need ngModel.

[xmaestro]

@achimha I think these changes are good to go. Do you?

[BeheadedKamikaze]

I didn't get a chance to try out this update yet (will have a look when I get home) but the implementation of the interface looks correct to me

[xmaestro]

@BeheadedKamikaze I'll be waiting for your feedback then ;)

[BeheadedKamikaze]

It works fine (I can bind to the value and the form only becomes valid when the box is selected).

The only issue is if you call reset() then it doesn't invalidate the ngForm.

[achimha]

Good point @BeheadedKamikaze. Could you give this a try?

public reset() {
    if (this.widgetId === null)
        return;
    // noinspection TypeScriptUnresolvedVariable
    (<any>window).grecaptcha.reset(this.widgetId);
    this.onChange(null);
}

I wonder if undefined or null would be the right value.

[BeheadedKamikaze]

Yeah @achimha that was my thought as well. I just tried and it works - the form becomes invalid as soon as it expires. :+1:

I would go with null personally.

[xmaestro]

Ok. Great. I'll create a PR shortly.

[BeheadedKamikaze]

Cool.

Also just a quick note to anyone looking at binding this to an ngModel, for validation to work you must also set a name attribute or formControlName if you are using dynamic forms.

<re-captcha
  [site_key]="RECAPTCHA_SITEKEY"
  [(ngModel)]="reCaptchaToken"
  name="reCaptcha"
  required
></re-captcha>

[xmaestro]

Does the PR #59 look right?

[BeheadedKamikaze]

Yes looks great - thanks! :rocket:

[xmaestro]

Merged PR #59. Closing this. Let's create a new one in case of issues.