Within my parent component, I've included a child component. When I click on the edit button, the edit form displays correctly and shows the previous data from the child component's select dropdown. However, if I choose not to select another option in the dropdown within the child component and submit the form to update the data, the form is submitted but the dropdown is posted as empty. On the other hand, if I click on the dropdown and either select the previous option or a new option, then the submit works properly.
parent.component.ts:
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { JobsService } from '../jobs.service';
import { Validators, FormGroup, FormArray, FormBuilder, FormControl, NgForm } from '@angular/forms';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'job-edit',
templateUrl: './parent.template.html',
providers: [JobsService],
})
export class JobEditComponent {
job: any = {};
errorMessage: string;
paramsObserver: any;
public myForm: FormGroup;
expireDate;
publishDate;
constructor(private _router: Router, private _route: ActivatedRoute, private _jobService: JobsService, private ngbDateParserFormatter: NgbDateParserFormatter) {}
ngOnInit() {
this.paramsObserver = this._route.params.subscribe(params => {
let jobId = params['jobId'];
this._jobService
.read(jobId)
.subscribe(
job => {
this.job = job;
this.expireDate = new Date(this.job.expireDate);
this.publishDate = new Date(this.job.publishDate);
this.job.expireDate = { "year": this.expireDate.getFullYear(), "month": this.expireDate.getMonth(), "day": this.expireDate.getDate() } ;
this.job.publishDate = { "year": this.publishDate.getFullYear(), "month": this.publishDate.getMonth(), "day": this.publishDate.getDate() } ;
},
error => this._router.navigate(['/jobs'])
);
});
}
ngOnDestroy() {
this.paramsObserver.unsubscribe();
}
update(form: NgForm) {
this.job = form.value;
let publishDate = this.job.publishDate;
let expireDate = this.job.expireDate;
let publishDateFormated = this.ngbDateParserFormatter.format(publishDate);
let expireDateFormated = this.ngbDateParserFormatter.format(expireDate);
this.job.publishDate = publishDateFormated;
this.job.expireDate = expireDateFormated;
this._jobService
.update(this.job)
.subscribe(savedJob => this._router.navigate(['/jobs', savedJob._id]), error => this.errorMessage = error);
}
}
parent.template.html:
<form #myForm="ngForm" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<contract-type name="contractType" [job]="job" ngModel ngDefaultControl></contract-type>
</div>
</div>
</div>
<button type="button" (click)="update(myForm)" class="btn btn-primary"><i class="fa fa-save">Save</i></button>
</form>
This is my child component:
import { Component, Input } from '@angular/core';
import { Http } from '@angular/http';
import { NgForm, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'contract-type',
template: `
<div *ngIf="contractTypes">
<label class="form-control-label" for="contractType">Contract Type</label>
<select id="contractType" name="contractType" required [(ngModel)]="job.contractType" class="form-control">
<option value="0" selected>Select an item</option>
<option *ngFor="let contractType of contractTypes" [value]="contractType.name_en">{{ contractType.name_en }}</option>
</select>
</div>
`
})
export class ContractTypeComponent {
private contractTypes;
@Input() job;
constructor(private _http: Http) {
this._http.get('/api/contractTypes')
.subscribe((res)=>{
this.contractTypes = res.json();
});
}
}
View of the edit form with default previous data: https://i.sstatic.net/FjDci.png
If I click the submit button without selecting an option from the contract type dropdown, the post data shows an empty dropdown. However, if I click on the dropdown and then select an option, that selection is posted. https://i.sstatic.net/qoEKM.png
Note: I'm using the child component for add functionality as well, which is why I chose to make it a separate component for reusability.
After submitting, the form appears like this: https://i.sstatic.net/T5MuL.png