mercredi 21 juin 2017

Set checkbox value to a TextBox using Angular2 Reactive Forms

I have a main Form and a Modal form. I have a checkbox on the Modal form. what I want to achieve is when I select one of the checkboxes on the Modal Form I want to populate the value associated with the checkbox onto a textbox that is on the Main Form. I will paste an Image so you get picture enter image description hereof what I want to achieve. Main page Modal Form

mainform HTML

<div class="form-group">
                        <div class="col-md-5" [ngClass]="{'has-error': (newQForm.get('agencyName').touched || newQForm.get('agencyName').dirty) && !newQForm.get('agencyName').valid }">
                            <label class="control-label" id="agencyNameId" name="qTab-label-agencyNameId"
                                   for="agencyNameId">Agency Name<span class="compulsary">*</span></label>
                            <input class="form-control" id="agencyNameTextId" name="qTab-textBox-agencyNameTextId" type="text" placeholder="Agency Name (required)" required minlength="3"
                                   formControlName="agencyName" />
                            <span class="help-block" *ngIf="(newQForm.get('agencyName').touched || newQForm.get('agencyName').dirty) && newQForm.get('agencyName').errors">
                                <span *ngIf="newQForm.get('agencyName').errors.required">
                                    Please enter agency name.
                                </span>
                                <span *ngIf="newQForm.get('agencyName').errors.minlength">
                                    The agency name must be longer than 3 characters.
                                </span>
                            </span>
                        </div>
                        <div class="col-md-push-2">
                            <button class="col-md-2 btn btn-info" data-toggle="modal" data-target="#agencyModal"
                                    id="agencyProfileId"
                                    name="createQ-button-agencyProfileId"
                                    type="button">
                                Search Agency Profile
                            </button>
                        </div>
</div>

Modal HTML

<div class="modal fade" id="agencyModal" role="form">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">Select an Agency</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <div class="col-md-3">
                                                <label class="control-label">
                                                    Search by Agency Name
                                                </label>
                                            </div>
                                            <div class="col-md-6">
                                                <input class="form-control"
                                                       id="modalAgencyNameId"
                                                       type="text"
                                                       placeholder="Agency Name"
                                                       formControlName="modalAgencyName"
                                                       [(ngModel)]="agencySearch" />
                                            </div>
                                        </div>
                                        <div class='table-responsive'>
                                            <table class='table'
                                                   *ngIf='agencies && agencies.length'>
                                                <thead>
                                                    <tr>
                                                        <th>Select Agency</th>
                                                        <th>AID</th>
                                                        <th>Address</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor='let agency of agencies | agencyFilter:agencySearch'>
                                                        <td>
                                                            <input type="checkbox" name="agencymodalCheckBox" formControlName="agencyModalCheckBox" />
                                                            
                                                        </td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators, FormArray } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { NewQ } from './NewQ';
import { IMyDpOptions } from 'mydatepicker';
import { IAgencies } from './agencymodal';
import { IPersons } from './personmodal';

@Component({
    templateUrl: './newq.component.html',
    styleUrls: ['app/Q/NewQ.component.css']
})
export class CreateNewQComponent implements OnInit {
    private myDatePickerOptions: IMyDpOptions = {
        dateFormat: 'dd.mm.yyyy',
    };
    pageTitle: string;
    newQForm: FormGroup;
    newq: NewQ = new NewQ();
    agencySearch: string;
    personSearch: string;
    agencies: IAgencies[] = [{
        "agencyName": "Davis county police",
        "AID": 122,
        "address": "122 S Davis County, Bountiful City"
    },
    {
        "agencyName": "Davis County Fire",
        "AID": 134,
        "address": "134 Davis County, Bountiful City"
    }];
    personsSearch: IPersons[] = [{
        "personName": "Bob",
        "phone": "8082736456",
        "email": "bob@barbwire.com",
        "status": "Active"
    },
    {
        "personName": "Rob Thomas",
        "phone": "5263545627",
        "email": "RobThomas@Bonafied.com",
        "status": "Pending"
    }];
    private sub: Subscription;


    ngOnInit(): void {
        this.newQForm = this.fb.group({
            agencyName: '',
            nqStartDate: ['', Validators.required],
            status: ['', Validators.required],
            priority: ['', Validators.required],
            discipline: ['', Validators.required],
            primerClassPerson: '',
            primerClassDate: '',
            followUpDate: '',
            persons: this.fb.array([this.initQPersons()]),
            nqCoordinators: this.fb.array([this.initNqCoordinators()]),
            qAdvisors: this.fb.array([this.initQAdvisors()]),
            modalAgencyName: '',
            modalPersonName: '',
            agencyModalCheckBox: '',
            personModalCheckBox: ''

        this.sub = this.route.params.subscribe(
            params => {
                let id = +params['id'];
                if (id === 0)
                    this.pageTitle = 'Add Q';
                else
                    this.pageTitle = 'Edit Q';

    }

    backBtnClick() {
        this.router.navigate(['/newq']);
    }

    //checkBoxSelected() {
    //    this.newQForm.setValue({
    //        modalAgencyName: 
    //    })
    //}
}




Aucun commentaire:

Enregistrer un commentaire