Angular 4 Date Field set to null on clicking radio button - angular2-forms

Question

So I manage to solve the original problem by updating the package but here is what follows, a dark background with dark font color
Below is the codes for the view
<div *ngSwitchCase="'Basic'">
<md-card>
<md-card-content>
<h4>Basic Institution Subscription Page</h4>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Your School or Institution Profile</div>
<div class="panel-body">
<md-card>
<md-card-content>
<div class="row" style="padding-left:10px;padding-bottom:10px;padding-top:20px">
<div class="col-md-6">
<img md-card-md-image [src]="'data:image/jpg;base64,' + institution.Crest" class="crest_image" style="margin-bottom:5px;margin-left:10px" />
<h6>Select Institution Crest</h6>
<input #crest type="file" (change)="crestChangeListner($event)" style="margin-left:20px" />
</div>
<div class="col-md-6">
<img md-card-md-image [src]="'data:image/jpg;base64,' + institution.BackGroundPicture" class="bgpic_image" style="margin-bottom:5px;margin-left:10px" />
<h6 *ngIf="!institution.BackGroundPicture">Select Background Image</h6>
<input #bgpic type="file" (change)="bgpicChangeListner($event)" style="margin-left:20px" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-radio-group [(ngModel)]="institution.OwnershipCategory"
(change)="OwnershipCategorySelected($event.value)" name="ownershipCategory" class="example-margin"
[value]="institution.OwnershipCategory"
[align]="isAlignEnd ? 'end' : 'start'">
<md-radio-button class="icon-align-vertical" name="ownershipCategory" value="Public">
Public
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="ownershipCategory" value="Private">
Private
</md-radio-button>
</md-radio-group>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-select placeholder="Select Country" style="width: 100%"
id="countryID" name="countryID" class="required"
[(ngModel)]="institution.Country"
(ngModelChange)="countrySelected()">
<md-option *ngFor="let country of countries" [value]="country.CountryID">
{{ country.CountryName }}
</md-option>
</md-select>
</div>
<div class="col-md-6">
<md-select placeholder="Select Office" style="width: 100%"
id="officeID" name="officeID" class="required"
[(ngModel)]="institution.OfficeID"
(ngModelChange)="officeSelected()">
<md-option *ngFor="let office of offices" [value]="office.AdministrativeStructureID">
{{ office.AdminStructName }}
</md-option>
</md-select>
</div>
</div>
<div class="row" *ngIf="offices">
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="InstitutionID" placeholder="Enter Institution ID"
[(ngModel)]="institution.InstitutionID" required id="InstitutionID" style="width: 100%"
#InstitutionID="ngModel">
<div [hidden]="InstitutionID.valid || InstitutionID.pristine"
class="alert alert-danger">
Institution ID is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Institution Name"
[(ngModel)]="institution.InstitutionName" name="InstitutionName" id="InstitutionName" required style="width: 100%"
#InstitutionName="ngModel">
<div [hidden]="InstitutionName.valid || InstitutionName.pristine"
class="alert alert-danger">
Institution Name is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="Website" placeholder="Enter Website Address"
[(ngModel)]="institution.Website" required id="Website" style="width: 100%"
#Website="ngModel">
<div [hidden]="Website.valid || Website.pristine"
class="alert alert-danger">
Website is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Email Address"
[(ngModel)]="institution.EmailAddress" name="EmailAddress" id="EmailAddress" required style="width: 100%"
#EmailAddress="ngModel">
<div [hidden]="EmailAddress.valid || EmailAddress.pristine"
class="alert alert-danger">
Email Address is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="PostalAddress" placeholder="Enter Postal Address"
[(ngModel)]="institution.PostalAddress" required id="PostalAddress" style="width: 100%"
#PostalAddress="ngModel">
<div [hidden]="PostalAddress.valid || PostalAddress.pristine"
class="alert alert-danger">
Postal Address is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Residential Address"
[(ngModel)]="institution.ResidentialAddress" name="ResidentialAddress" id="ResidentialAddress" required style="width: 100%"
#ResidentialAddress="ngModel">
<div [hidden]="ResidentialAddress.valid || ResidentialAddress.pristine"
class="alert alert-danger">
Residential Address is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="Phone1" placeholder="Enter Phone1"
[(ngModel)]="institution.Phone1" required id="Phone #1" style="width: 100%"
#Phone1="ngModel">
<div [hidden]="Phone1.valid || Phone1.pristine"
class="alert alert-danger">
Phone1 is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Phone2"
[(ngModel)]="institution.Phone2" name="Phone2" id="Phone #2" required style="width: 100%"
#Phone2="ngModel">
<div [hidden]="Phone2.valid || Phone2.pristine"
class="alert alert-danger">
Phone2 is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md2-datepicker
style="width:100%"
class="md-input-element"
placeholder="Select Date Founded"
name="DateFounded"
(ngModel)="institution.DateFounded"
[required]="isRequired"
[disabled]="isDisabled"
[openOnFocus]="isOpenOnFocus"
[isOpen]="isOpen"
[type]="type"
[min]="minDate"
[max]="maxDate">
</md2-datepicker>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-4"><h6>Select Institution Catgory</h6></div>
<div class="col-md-8">
<md-radio-group [(ngModel)]="institution.SchoolCategory"
(change)="SchoolCategorySelected($event.value)" name="schoolCategory" class="example-margin"
[value]="institution.SchoolCategory"
[align]="isAlignEnd ? 'end' : 'start'">
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="A">
A
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="B">
B
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="C">
C
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="D">
D
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="E">
E
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="F">
F
</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
</md-card-content>
</md-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Shool Ownership In formation</div>
<div class="panel-body">
<md-card>
<md-card-content>
<div class="row">
<md-select placeholder="Select Owner Type" style="width: 100%"
id="ownershipTye" name="ownershipType" class="required"
[(ngModel)]="ownershipType"
(ngModelChange)="ownershipTypeSelected()">
<md-option *ngFor="let option of ownershipTypes" [value]="option">
{{ option }}
</md-option>
</md-select>
</div>
<div class="row">
<md-input-container style="width:100%">
<input mdInput name="fullName" placeholder="Enter Full Name"
[(ngModel)]="ownership.FullName" required id="fullName" style="width: 100%"
#fullName="ngModel">
<div [hidden]="fullName.valid || fullName.pristine"
class="alert alert-danger">
fullName is required
</div>
</md-input-container>
</div>
<div class="row">
<ul class="list-group">
<li class="list-group-item" *ngFor="let owner of ownerships">
<span class="badge">{{owner.FullName}}</span>
<md-checkbox name="ownerName"
(change)="fullNameSelected(owner)"
[(ngModel)]="owner.Selected">
{{owner.OwnershipTye}}
</md-checkbox>
</li>
</ul>
</div>
</md-card-content>
</md-card>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-6">
<button md-raised-button color="primary" type="button" (click)="AddOwner()">Add Owner</button>
</div>
<div class="col-md-6">
<span class="pull-right">
<button md-raised-button color="primary" type="button" (click)="removeOwner()">Remove Owner</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</md-card-content>
</md-card>
</div>
and this part of the code for the component
isRequired = false;
isDisabled = false;
isOpenOnFocus = false;
isOpen = false;
type: string = 'date';
types: Array<any> = [
{ text: 'Date', value: 'date' },
{ text: 'Time', value: 'time' },
{ text: 'Date Time', value: 'datetime' }];
openDatepicker() {
this.isOpen = true;
setTimeout(() => {
this.isOpen = false;
}, 1000);
}
//startDate: Date = null;
setDate() {
this.institution.DateFounded = new Date();
}
minDate: Date = null;
maxDate: Date = null;
setDateRange() {
this.minDate = new Date();
this.minDate.setMonth(this.minDate.getMonth() - 3);
this.maxDate = new Date();
this.maxDate.setMonth(this.maxDate.getMonth() + 3);
}