chore(demo): add form example for tui-checkbox (#8922)

projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts

@@ -34,6 +34,11 @@ export class ExampleTuiCheckboxLabeledComponent extends AbstractExampleTuiContro
         HTML: import('./examples/2/index.html?raw'),
     };
 
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+    };
+
     override readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
 
     override size: TuiSizeL = this.sizeVariants[0];

projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.module.ts

@@ -3,14 +3,15 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiLinkModule} from '@taiga-ui/core';
+import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
 import {TuiCheckboxLabeledModule} from '@taiga-ui/kit';
 import {MarkdownModule} from 'ngx-markdown';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {ExampleTuiCheckboxLabeledComponent} from './checkbox-labeled.component';
 import {TuiCheckboxLabeledExample1} from './examples/1';
 import {TuiCheckboxLabeledExample2} from './examples/2';
+import {TuiCheckboxLabeledExample3} from './examples/3';
 
 @NgModule({
     imports: [
@@ -24,11 +25,13 @@ import {TuiCheckboxLabeledExample2} from './examples/2';
         TuiAddonDocModule,
         InheritedDocumentationModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCheckboxLabeledComponent)),
+        TuiButtonModule,
     ],
     declarations: [
         ExampleTuiCheckboxLabeledComponent,
         TuiCheckboxLabeledExample1,
         TuiCheckboxLabeledExample2,
+        TuiCheckboxLabeledExample3,
     ],
     exports: [ExampleTuiCheckboxLabeledComponent],
 })

projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.template.html

@@ -33,6 +33,14 @@
         >
             <tui-checkbox-labeled-example-2></tui-checkbox-labeled-example-2>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="form"
+            heading="Form"
+            [content]="example3"
+        >
+            <tui-checkbox-labeled-example-3></tui-checkbox-labeled-example-3>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/checkbox-labeled/examples/3/index.html

@@ -0,0 +1,45 @@
+<ng-container *ngIf="currentQuestion < 2; else result">
+    <p>{{ currentQuestion + 1 }}. {{ questionTitles[currentQuestion] }}</p>
+
+    <form [formGroup]="form">
+        <tui-checkbox-labeled
+            *ngFor="let option of questions[currentQuestion]; let index = index; trackBy: trackByIndex"
+            class="tui-space_top-2"
+            [formControlName]="index"
+        >
+            {{ option }}
+        </tui-checkbox-labeled>
+    </form>
+
+    <button
+        size="s"
+        tuiButton
+        type="button"
+        class="tui-space_top-4"
+        (click)="nextQuestion()"
+    >
+        Next
+    </button>
+</ng-container>
+
+<ng-template #result>
+    <p>
+        <b>Your answers</b>
+    </p>
+
+    <div
+        *ngFor="let options of results; let i = index"
+        class="tui-space_top-4"
+    >
+        <p>{{ i + 1 }}. {{ questionTitles[i] }}</p>
+
+        <tui-checkbox-labeled
+            *ngFor="let question of questions[i]; let j = index"
+            class="tui-space_top-2"
+            [ngModel]="options[j]"
+            [readOnly]="true"
+        >
+            {{ question }}
+        </tui-checkbox-labeled>
+    </div>
+</ng-template>

projects/demo/src/modules/components/checkbox-labeled/examples/3/index.ts

@@ -0,0 +1,45 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-checkbox-labeled-example-3',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiCheckboxLabeledExample3 {
+    readonly questionTitles = ['Which prefer?', 'Which prefer again?'];
+
+    readonly questions = [
+        ['Angular', 'React', 'Vue'],
+        ['Svelte', 'Ember', 'React'],
+    ];
+
+    currentQuestion = 0;
+
+    results: boolean[][] = [];
+
+    form = new FormGroup({
+        0: new FormControl(false),
+        1: new FormControl(false),
+        2: new FormControl(false),
+    });
+
+    trackByIndex(index: number): number {
+        return index;
+    }
+
+    nextQuestion(): void {
+        this.currentQuestion++;
+
+        this.results.push(Object.values(this.form.value).map(Boolean));
+
+        this.form = new FormGroup({
+            0: new FormControl(false),
+            1: new FormControl(false),
+            2: new FormControl(false),
+        });
+    }
+}