Styjun

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