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