angular6 cannot set the value of ngForm from component.ts - angular6

Question

i am developing an basic angular 6 application that fetches the data, display it in the table, each row has delete, edit button this is one component 'detail list', i have another component as 'detail component' that are having controls to add the record in the table, i am fetching the data from the webapi, adding the record and deleting the record using the same webapi, they all are working fine, now i want to edit the record from the table, i am using the same webapi to fetch the data, webapi returning the record, i want to display this record's data in the 'detail component', the same component that is used to add the record, so at the component i am calling ngAfterViewInit()
>
ngAfterViewInit() {
this.service.change.subscribe((data: Patient) => {
alert('in the detail component of ngAfterViewInit');
console.log(data);
this.ModelChange(data);
}) ;
}
and the code for the ModelChange is as follows
ModelChange(data: Patient) {
this.form.controls['PatientCode'].setValue(data.PatientCode);
}
and my html is like
<form #form="ngForm" autocomplete="on" (submit)="OnSubmit(form)">
<div class="row">
<div class="form-group">
<input name="PatientCode" [(ngModel)]="PatientCode"class="form-control" placeholder ="Patient Code" (ngModelChange)="ModelChange(event)" required>
</div>
<div class="col-md -3 form-group">
<input name="FirstName" [(ngModel)] ="FirstName" class="form-control" placeholder="First Name" required>
</div>
<div class=" col-md-5 form-group">
<input name="LastName" [(ngModel)]="LastName" class="form-control" placeholder="Last Name" required>
</div>
</div>
<div class="row">
<div class="form-group">
<input name="MRN" class="form-control" [(ngModel)]="MRN" placeholder="MRN" required>
</div>
<div class="col-md-3 form-group">
<!--<input name="DateOfBirth" class="form-control" placeholder="Date of Birth">-->
<ejs-datepicker name="DateOfBirth" [(ngModel)]="DateOfBirth" id='datepicker' placeholder='Enter Date Of Birth' [value]='value' [min]='minDate' [max]='maxDate'></ejs-datepicker>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<button type="submit" (click)="AddPatient(p)" class="btn btn-success center-block "> Add Patient</button>
</div>
<div class="col-md-13">
<button type="submit" (click)="EditPatient(p)" class="btn btn-success center-block "> Edit Patient</button>
</div>
</div>
</form>
at the console i am getting error that cannot Cannot read property 'controls' of undefined
Please help me out what is the correct way of setting the control property with the fetched data