Angular 4获取管道的反应形式输入值答案

【问题标题】：Angular 4 get reactive form input value for PipeAngular 4获取管道的反应形式输入值
【发布时间】：2023-03-21 19:09:01
【问题描述】：

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

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

}

【问题讨论】：

标签： angular pipe reactive angular4-forms

【解决方案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>

【讨论】：

从 *ngFor 语句中删除双花括号。在 ngFor 中你不需要它们。

【解决方案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>

【讨论】：