1

being very new to Angular 2 ( and Angular in general ) , I've encountered a situation with my colleague where he decided to go for the template driven approach and me for the reactive driven approach. We've both created components. His being a search product component and mine being a credidcard component.

What does it do and the wish

From a searchbox if you select a creditcard from the dropdownbox my component will be rendered(and validated when a number is being inserted).

I wish to bind the data from my creditcard component ( being the child ) to the model of the SearchProductModel that he defined. I saw something similar which resembles my problem a bit here is the post (Pass data from child to parent component Angular2).

These are 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 (optioneel)" [(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>productnumber required</md-error>
</md-input-container>

<button md-button type="submit" id="btn-zoek">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 creditcard</div>
</md-input-container>
</div>
</form>

As I understand it, the mixed template driven and reactive approach is not advisable so I will be refactoring this in the future. But for now I wonder how I can make it possible for my creditcard input to get into his model.productId ( see the code). Bear with me, I'm new in this and I'm just having a hard time wrapping my head around it.

Help very much appreciated.

D. Zaraki
  • 35
  • 4

1 Answers1

0

Ok, I made a small mistake that has led me to believe my solution didn't work. However it did work. I just followed the explanation I've put in the link above. Added the Emitter in my component and subscribed the other component to the events of mine. That did the trick.

D. Zaraki
  • 35
  • 4