Question

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

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

}

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

Answer 2

我的管道出错了我现在还必须检查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>

Angular 4获取Pipe的反应形式输入值

2 个答案: