Recently delving into Angular 2 ( and Angular overall ) , I found myself at a crossroads with my co-worker. He opted for the template-driven method while I leaned towards the reactive-driven approach. We both built components, with his being a search product component and mine focusing on credit cards.
Purpose and Goal
Upon selecting a credit card from the dropdown box in the search box, my credit card component will be displayed(and validated as numbers are entered).
I aim to link the data from my credit card component (as the child) to the model of the defined SearchProductModel that he created. I came across a similar issue on this post (Pass data from child to parent component Angular2) which resonates with my situation.
Here are details of the components and templates:
creditcard.component.ts
@Component({
selector:'creditcard',
templateUrl:'./app/creditcard/creditcard.component.html'
})
export class CreditcardComponent {
creditForm: FormGroup
ccnumber = new FormControl('', [Validators.required, validateCreditcard]);
constructor(fb:FormBuilder){
this.creditForm = fb.group({"ccnumber":this.ccnumber})
}
search-product.component.ts
@Component({
selector:'search-product',
templateUrl:'./app/search/search-product.component.html'
})
export class SearchProductComponent{
products: Product[]
model = new SearchProductModel();
searchResult:string;
constructor(private searchProductService: SearchProductService){}
ngOnInit(): void {
this.searchProductService.getProducts().subscribe(products => this.products = products, error => console.log(error));
}
onSubmit(): void {
this.searchProductService.searchProduct(this.model).subscribe(result => this.searchResult = result,
error => console.log(error));;
}
search-product.component.html
<form (ngSubmit)="onSubmit()" #searchForm="ngForm" autocomplete="off">
<p>
<md-select placeholder="Product (optional)" [(ngModel)]="model.productId" name="product-id" id="product" style="width:250px">
<md-option *ngFor="let product of products" [value]="product.Id">{{product.Name}}</md-option>
</md-select>
</p>
<div [ngSwitch]="model.productId">
<p *ngSwitchCase="1">
<creditcard></creditcard>
</p>
<p *ngSwitchDefault>
<md-input-container style="width: 250px">
<input mdInput [(ngModel)]="model.productNumber" name="product-number" id="product-number" required/>
<md-error>product number required</md-error>
</md-input-container>
<button md-button type="submit" id="btn-search">Search</button>
</form>
creditcard.component.html
<form [formGroup]="creditcardForm">
<div class="form-group">
<md-input-container>
<input mdInput formControlname="creditcardnumber" id="creditcardnumber" name="creditcardnumber"/>
<div *ngIf="creditForm.get('creditcardnumber').dirty && creditcardForm.get('creditcardnumber').hasError('validCreditcard')">Not correct credit card</div>
</md-input-container>
</div>
</form>
It's evident that mixing template-driven and reactive approaches is not recommended, so refactoring is in order down the line. However, for now, I'm puzzled about how to integrate my credit card input with his model.productId. I acknowledge that I'm still learning the ropes here and struggling to grasp it all.
Any assistance would be greatly appreciated.