vendredi 29 juillet 2016

Angular 2 - Required field validation if checkbox is selected

Hy guys I'm new to Angular2 and in JS frameworks in general. I'm flowing tutorials on official site and haven't been able to find the solution to this problem.

So I have checkbox which is optional but if the checkbox is "checked" a new input field is shown. this part is not a problem. The problem is that I'm using modal based validation and I can't figure out how to make this new input field required only if the checkbox is checked.

this is may implementation so far:

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<!---->

<div formGroupName="test">
    <div class="field">
        <div class="checkbox">
            <input type="checkbox" name="entryRecurring" value="" id="entryRecurring" formControlName="entryRecurring" />
            <label for="entryRecurring">
                <div class="checkbox_icon"></div>
                Recurring Entry
            </label>
        </div>
    </div>

    <div *ngIf="form.value.test.entryRecurring">
        <div class="field">
            <label for="entryRecurringAmount">Repeat Amount</label>
            <input type="text" name="entryRecurringAmount" value="" id="entryRecurringAmount" formControlName="entryRecurringAmount" />
        </div>
    </div>
</div>

<div class="field last">
    <button name="submit" id="submit" class="btn btn_sushi"  [disabled]="!form.valid">Submit</button>
</div>

    import {Component, Input, OnInit, OnChanges} from '@angular/core';
    import { Validators } from '@angular/common';
    import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl, FormBuilder } from '@angular/forms';  
    import { FormMessages } from './../helpers/formMessages.component';
    import {EntriesService} from './entries.service';    
    import {ValidationService} from '../helpers/validation.service';
    import {Category, CategoryByType} from '../../mock/mock-categories';


    @Component({
        selector: 'entryForm',
        templateUrl: 'app/components/entries/entriesEdit.template.html',
        directives: [REACTIVE_FORM_DIRECTIVES, FormMessages],
        providers: [EntriesService, ValidationService]

    })
    export class EntriesEditComponent implements OnInit, OnChanges {
        @Input() control: FormControl;
        public form:FormGroup;
        public submitted:boolean = false;
        // private selectedId: number;

        categories: Category[];
        categoriesSortedByType: CategoryByType[];

        constructor(
            private _fb:FormBuilder,
            private _entriesService: EntriesService
            // private _router: Router
        ) {

            this.form = this._fb.group({

                test: this._fb.group({
                    entryRecurring: [''],
                    entryRecurringAmount: [''],
                })
            });
        }
onSubmit() {
        this.submitted = true;
        // console.log(this.form.value);

        if (this.form.dirty && this.form.valid) {
            this._entriesService.saveEntry(this.form.value);
        }
    }




Aucun commentaire:

Enregistrer un commentaire