Skip to content

Commit

Permalink
docs: added angular form section to README.md
Browse files Browse the repository at this point in the history
yuskhan authored Nov 8, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent f7c975d commit 199ba13
Showing 1 changed file with 34 additions and 3 deletions.
37 changes: 34 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

# Cloudflare Turnstile Component for Angular

## ngx-turnstile
@@ -15,18 +16,18 @@ npm install ngx-turnstile --save

## Quickstart

To start, import the TurnstileModule in your app module.
To start, import the NgxTurnstileModule in your app module.

```typescript
// app.module.ts
import { TurnstileModule } from "ngx-turnstile";
import { NgxTurnstileModule } from "ngx-turnstile";
import { BrowserModule } from "@angular/platform-browser";
import { MyApp } from "./app.component.ts";

@NgModule({
bootstrap: [MyApp],
declarations: [MyApp],
imports: [BrowserModule, TurnstileModule],
imports: [BrowserModule, NgxTurnstileModule],
})
export class MyAppModule {}
```
@@ -53,6 +54,36 @@ export class MyApp {
}
```

## Usage with @angular/forms
Import both NgxTurnstileModule and NgxTurnstileFormsModule modules in your app module.
```typescript
import { NgxTurnstileModule, NgxTurnstileFormsModule } from "ngx-turnstile";
```

Then import either FormsModule or ReactiveFormsModule from @angular/forms depending on the type of form you want to use.

You can then use the ngModel, formControl or formControlName directives on the component depending on which module you imported from @angular/forms.

### Reactive Form Example
```html
<ngx-turnstile
[siteKey]="siteKey"
theme="auto"
[formControl]="tokenControl"
></ngx-turnstile>
```

### Template Driven Form Example
```html
<ngx-turnstile
[siteKey]="siteKey"
theme="light"
[(ngModel)]="token"
></ngx-turnstile>
```

The component is read-only, meaning that you should not update the control with a custom value. Updating the control value will reset the component

## API

The component supports these options as input:

0 comments on commit 199ba13

Please sign in to comment.