CODEWITHSUNDEEP
angularpipereactiveangular4-forms
Joe ONeil
Joe ONeil

Reputation: 130

Angular 4 get reactive form input value for Pipe

I have a search field which filters a list in a multi select box the Pipes worked when I used template forms. But I changed to reactive forms and I can not find how to get to the value

<modal-content  [formGroup]="prodForm">


    <input type="text" id="make" class="form-control search"   
        placeholder="Make" formControlName="make"/>
    <input type="text" id="model" class="form-control search"
       placeholder="Model"  formControlName="model" />
    <input type="text" id="fromModelYear" class="form-control search"
       placeholder="From Model Year"  formControlName="fromModelyear"/>
   <input type="text" id="toModelYear" class="form-control search"
       placeholder="To Model Year" formControlName="toModelyear"/>

         <select id="selProduct" multiple formControlName="selProduct" 
             class="form-control">
            <option *ngFor="let product of productsList|searchMake: 
                 make|searchModel:model|searchFromYear:fromModelyear|
                     searchToYear:toModelyear" [value]="product"  >
                  {{product.makeModelModelYr}} 
                </option>
         </select>
       </modal-content>

I need to get the value from the input fields to use for the pipe I have tried

<input type="text" id="model" class="form-control search"
   placeholder="Model"  formControlName="model" [value]="modeltxt"/>

then using modeltxt in pipe

using modeltxt.value in the pipe

if I had code text in the pipe the pipe works I also tried 

  ngOnInit() {
     this.prodForm.valueChanges.subscribe(v => this.modelValue = v.model);
  }

then used {{modelValue}} in the pipe The code works with template forms I just need to know how to format and get the value to insert it in the pipe

this is one of the pipes

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchModel'
})
export class SearchModelPipe implements PipeTransform {

 transform(product: any, model: any): any {

//check if search term is undefined
if (model === undefined) return product;
//return updates people array
return product.filter(function(thisproduct) {
  return thisproduct.model.toLowerCase().includes(model.toLowerCase());
})
  }

}

Upvotes: 2

Views: 8840

Answers (2)

Joe ONeil
Joe ONeil

Reputation: 130

I had an error in my pipe I also have to check for null now which did not affect the templates 

 if (model === undefined||model===null) return product;

now the chain looks like this

 <select id="selProduct" multiple formControlName="selProduct"   class="form-control">
            <option *ngFor="let product of productsList |searchMake:prodForm.get('make').value|searchModel:prodForm.get('model').value|searchFromYear:prodForm.get('fromModelyear').value|searchToYear:prodForm.get('toModelyear').value" [value]="product"  >
             {{product.makeModelModelYr}} 
           </option>
         </select>

Upvotes: 1

Lansana Camara
Lansana Camara

Reputation: 9873

In order to get a value of a form control, you must grab it from the form group.

For instance, if this is your form group in your component:

constructor(private fb: FormBuilder) {}

this.form = this.fb.group({
    name: ['', Validators.required]
});

Then this is how you grab the value of the name control on that form group in your template:

<p>{{form.get('name').value}}</p>

Thus, if you want to apply the pipe you simply add it after the value:

<p>{{form.get('name').value | myPipe}}</p>

Upvotes: 1

Related Questions