Reactive Forms Module about ng-recaptcha HOT 2 CLOSED

I just got it working using ReactiveFormsModule, so will show you how I did it.

My form group is nothing special. Just a simple form where someone checks a box to report an item.

Module:

import { RecaptchaModule } from 'ng-recaptcha';
import { RecaptchaFormsModule } from 'ng-recaptcha/forms';

@NgModule({
    imports: [
        RecaptchaModule.forRoot(),
        RecaptchaFormsModule
    ]
})

Markup:

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="reportForm">
    <ul>
        <li><label><input type="radio" checked="checked" formControlName="reason" value="firstReason" /> First Reason</label></li>
        ...
    </ul>
    <p><re-captcha [formControlName]="'recaptcha'" siteKey="key"></re-captcha></p>
    <button [disabled]="reportForm.invalid">Submit</button>
</form>

Form Group:

ngOnInit() {
    const initialChecked: string = 'firstReason';

    this.reportForm = new FormGroup({
        reason: new FormControl(initialChecked),
        recaptcha: new FormControl(null, Validators.required)
    });
}

You have to have RecaptchaFormsModule imported as well as the usual one.

Ensure what you enter in your [formControlName] is a string representation of the name of the control, not just the name itself.

When the recaptcha hasn't been done, this.reportForm.valid will be false and this.reportForm.value.captcha will be null. Then obviously, the opposite is true if they have completed the recaptcha.

Then in my onSubmit method, I just call my service that sends the report reason and send the recaptcha value to where it needs to be.

Hope that's of any use.

from ng-recaptcha.

Hello! Is there a particular issue you're running into when trying to use the module with dynamic forms?

from ng-recaptcha.