I understand this is possibly a duplicate question but by reading other solutions I am not able to figure out my problem . So I would really appreciate if someone can point out my mistake. HTML code:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<form [formGroup]="contactForm" >
<div class="form-group">
<label>Contact Id</label>
<input type="text"
formControlName="contactId"
[(ngModel)]="contactId"
class="form-control" />
<!-- <div *ngIf="submitted && contactFormf.contactId.errors" class="invalid-feedback">
<div *ngIf="contactFormf.contactId.errors.required">Contact Id is required</div>
</div> -->
</div>
<div class="form-group">
<label>Agreement Id</label>
<input
type="text"
formControlName="agreementId"
[(ngModel)]="agreementId"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && contactFormf.agreementId.errors }"
/>
<div *ngIf="submitted && contactFormf.agreementId.errors" class="invalid-feedback">
<div *ngIf="contactFormf.agreementId.errors.required">Agreement Id is required</div>
</div>
</div>
<div class="form-group">
<label>Contact Type</label>
<mat-select
formControlName="contactType"
[(ngModel)]="contactType"
class="form-control">
<mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
</mat-select>
</div>
<div class="form-group">
<label>Contact Type Description</label>
<input type="text"
formControlName="contactTypeDescription"
[(ngModel)]="contactTypeDescription"
class="form-control" />
</div>
<div class="form-group">
<label>Contact Sub Type</label>
<mat-select
formControlName="contactSubType"
[(ngModel)]="contactSubType"
class="form-control">
<mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
</mat-select>
</div>
<div class="form-group">
<label>Contact Sub Type Description</label>
<input type="text"
formControlName="contactSubTypeDescription"
[(ngModel)]="contactSubTypeDescription"
class="form-control" />
</div>
<div class="form-group">
<label>Reference Number</label>
<input type="text"
formControlName="referenceNumber"
[(ngModel)]="referenceNumber"
class="form-control" />
</div>
<div class="form-group">
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="contactLastVerifiedDatepicker"
formControlName="contactlastVerifiedDate"
[(ngModel)]="contactlastVerifiedDate"
placeholder="Choose Start date"
/>
<mat-datepicker-toggle matSuffix [for]="contactLastVerifiedDatepicker"></mat-datepicker-toggle>
<mat-datepicker #complaintStartDatepicker></mat-datepicker>
</div>
<div class="form-group">
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="contactStartDatepicker"
formControlName="contactStartDate"
[(ngModel)]="contactStartDate"
placeholder="Choose Contact Start date"
/>
<mat-datepicker-toggle matSuffix [for]="contactStartDatepicker"></mat-datepicker-toggle>
<mat-datepicker #contactStartDate></mat-datepicker>
</div>
<div class="form-group">
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="contactEndDatepicker"
formControlName="contactEndDate"
[(ngModel)]="contactEndDate"
placeholder="Choose Contact Start date"
/>
<mat-datepicker-toggle matSuffix [for]="contactEndDatepicker"></mat-datepicker-toggle>
<mat-datepicker #contactStartDate></mat-datepicker>
</div>
</form>
</div>
</div>
</div>
Typescript Code:
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-contactform',
templateUrl: './contactform.component.html',
styleUrls: ['./contactform.component.scss']
})
export class ContactformComponent implements OnInit {
contactForm: FormGroup;
contactId = '';
agreementId = '';
contactType = '';
contactTypeDescription = '';
contactSubType = '';
contactSubTypeDescription = '';
referenceNumber = '';
contactlastVerifiedDate = '';
contactStartDate = '';
contactEndDate = '';
contactTypes: any[] = [{ value: '', viewValue: '' }, { value: '',
viewValue: '' }, { value: '', viewValue: '' }];
contactSubTypes: any[] = [{ value: '', viewValue: '' }, { value: '',
viewValue: '' }, { value: '', viewValue: '' }];
constructor(private formBuilder: FormBuilder) {}
@Output()
savedContact: EventEmitter<any> = new EventEmitter<any>();
ngOnInit() {
this.contactForm = this.formBuilder.group({
contactId: ['', Validators.required],
agreementId: ['', Validators.required],
contactType: ['', Validators.required],
contactTypeDescription: [''],
contactSubType: ['', Validators.required],
contactSubTypeDescription: [''],
referenceNumber: [''],
contactlastVerifiedDate: ['', Validators.required],
contactStartDate: ['', Validators.required],
contactEndDate: ['']
});
}
get contactFormf() {
return this.contactForm.controls;
}
onSubmitcontactForm() {
// Stop here if Agent Relationship Form is invalid
if (this.contactForm.invalid) {
return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.contactForm.value));
}
saveContact() {
var savedContact = {
contactId: this.contactId,
agreementId: this.agreementId,
contactType: this.contactType,
contactDescription: this.contactTypeDescription,
contactSubType: this.contactSubType,
contactSubTypeDescription: this.contactSubTypeDescription,
referenceNumber: this.referenceNumber,
lastVerifiedDate: this.contactlastVerifiedDate,
startDate: this.contactStartDate,
endDate: this.contactEndDate
};
this.savedContact.emit(savedContact);
}
}
class Contact {
contactId?: number;
agreementId?: string[];
contactType?: string;
contactDescription?: string;
endDate?: string;
lastVerifiedDate?: string;
referenceNumber?: string;
startDate?: string;
contactSubType?: string;
contactSubTypeDescription?: string;
}
From what I understand by reading other answers is that my ngModel declarations and variables in typescript are mismatching or something like that. But I am not entirely sure where I am going wrong.I have made similar things for my other components and they seem to work fine.
