I've been struggling to understand how to implement the adapter pattern in Angular6. Despite reading numerous articles and tutorials, I still can't quite grasp the concept. Could someone provide some insights on this topic? Essentially, I have a service that fetches data which needs to be used in a component with a different model. I need to modify it before sending it back to the service in the correct format. My main question is whether we should create an interface to manage HTTP calls. If so, how do we store and utilize the data in my adapter class considering that the resources I consulted emphasize keeping data models and view models separate?
Below is a JSON object returned from the server (assets/mocks/quote.json)
{
"quote": {
"quoteId": 123,
"commenseDate": "12/15/2018",
"quoteType": "Small",
"count": 10,
"customerInfo": {
"customerName": "ABC",
"address": "xxxx xxx xxx",
"city": "Philadelphia",
"state": "Philadelphia ",
"zip": "xxxxx",
"county": "PA",
"phone": "",
"eligibles": 2,
"employeeCount": 2
}
}
}
I'm unsure about using models and interfaces when connecting to a web service. After consulting the Angular docs, I learned that using interfaces for our data models is essential when connecting to a web service. Therefore, I created an interface to handle my data model.
export interface Quote{
quoteId: number;
commenseDate: string;
count: number;
quoteType: string;
customerInfo: CustomerInfo
}
export interface CustomerInfo {
customerName: string;
address: string;
city: string;
state: string;
zip: number;
county: string;
phone: number;
eligibles: number;
employeeCount: number;
}
In my service call, I utilized this interface. Below is my quote-search-service.ts file:
export class QuoteSearchListService {
/* ApiService- is just a wrapper class to hold the http logic. This class imports HttpClient and uses its get
* and post methods
*/
constructor(private apiService:ApiService) { }
/** Get a quote item */
getQuoteItem(quoteId:number):Observable<Quote>{
return this.apiService.get<Quote>('assets/mocks/quote.json')
.pipe(map((data) => data));
}
}
I'm utilizing a reactive form in my component along with the following form model:
export class QuoteComponent implements OnInit {
private form: FormGroup;
constructor(private router: Router, private fb: FormBuilder, private quoteService: QuoteSearchListService) {
this.form = this.fb.group({
customerName: [null, Validators.required]
address: this.fb.group({
`enter code here`
address1: ['', Validators.required],
address2: ['']
})
addressDetails: this.fb.group({
state: [null, Validators.required],
city: [null, Validators.required],
zip: [null, Validators.required]
}),
county: [''],
phone: ['', [Validators.required, Validators.minLength(10)],
contact: this.fb.group({
contactFirstName: [null, Validators.required],
contactLastName: [null, Validators.required],
}),
eligibles: [null, Validators.required],
empCount: [null, Validators.required],
fteCount: [null, Validators.required]
})
}
ngOnInit() {
this.getQuoteItem(this.quoteId);
}
getQuoteItem() {
this.quoteService.getQuoteItem(quoteId).subscribe(response => {
this.form.setValue(response.quote);
})
}
}
Here are my specific questions:
- How can I incorporate the adapter pattern in this scenario to maintain independence between my data model and form model?
- Do I need to create additional models/classes specifically for my component apart from the form model? For instance, 'addressDetails' differs from the data model.
- How should the conversion from data-model to form-model (for GET calls) and vice versa (for POST/PUT calls) be handled? Should I develop a separate service to facilitate this model transformation?
Resources I've consulted:
When to use Interface and Model in TypeScript / Angular2