2

我有一个搜索字段，用于过滤多选框中的列表，当我使用模板表单时，管道工作。但我改为反应形式，我找不到如何获得价值

<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>

我需要从输入字段中获取值以用于我尝试过的管道

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

然后在管道中使用modeltxt

在管道中使用 modeltxt.value

如果我在管道中有代码文本，管道工作我也尝试过

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

然后在管道中使用 {{modelValue}} 该代码适用于模板表单我只需要知道如何格式化并获取将其插入管道的值

这是管道之一

 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());
})
  }

}
4

2 回答 2

1

为了获取表单控件的值，您必须从表单组中获取它。

例如，如果这是您组件中的表单组：

constructor(private fb: FormBuilder) {}

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

然后，这就是您name在模板中获取该表单组上的控件值的方式：

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

因此，如果要应用管道，只需将其添加到值之后：

<p>{{form.get('name').value | myPipe}}</p>
于 2017-08-10T14:37:10.713 回答
1

我的管道中有一个错误，我现在还必须检查 null，这不会影响模板

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

现在链条看起来像这样

 <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>
于 2017-08-10T15:33:23.913 回答