【问题标题】：how to use NgIF condition with formcontrol instead of ngModel如何使用带有表单控件而不是 ngModel 的 NgIF 条件
【发布时间】：2019-09-12 08:31:21
【问题描述】：

我想使用formcontrol 比较我的值而不是使用ngModel，当在我的输入框中输入值时，我想显示我的取消图像，所以我在订阅中将userTextValue 设为true，我的查询现在是单击取消时如何重置值。我希望输入框为空，现在取消按钮被隐藏但值仍然可用，我正在使用管道过滤值。

<input matInput class="form-control input" placeholder="Enter name or Id" id="user"
    [formControl]="userControl"[matAutocomplete]="auto>
       <img src="assets/icons/cancel.svg" *ngIf="userTextvalue" class="cancel-icon" 
        aria-label="Clear" (click)="clearUserValues()">

ts：

  constructor() {
    this.userControl.valueChanges.subscribe((user) => {
      this.filterResult = user;
      this.userTextvalue = true;
    });
  }
  clearUserValues() { 
    this.filterResult = "";
    this.userTextvalue = false;
  }

管道.ts

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

@Pipe({
  name: 'filterUser'
})
export class FilterUserPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if (searchText && searchText.length > 1) {
      items = searchText ? this.filterUsers(items, searchText) : items.slice();
    } else {
      items = [];
    }
    return items;
  }

  filterUsers(items: any[], value: string): any[] {
    const filterValue = value.toLowerCase();
    return items.filter(item => item.name.toLowerCase().indexOf(filterValue) === 0);
  }

}

【问题讨论】：

标签： angular7 angular-ng-if

【解决方案1】：

首先，您必须了解模板驱动和反应式表单方法之间的区别。当表单控件发生任何更改时，它会返回表单的新对象（包括其表单控件），这就是使其同步方法的原因。
让我在简短的场景中总结一下。

当 formcontrol 输入或 html 标签发生任何变化时可以通过订阅它来跟踪它。例如 // 获取特定的 FormControl 更改值。 // 表单：FormGroup

this.form.get('name of your formControl').subscribe(value => {// here (value) is changed value of that particular formControl. });

第二种方法例如，您在任何可点击的输入按钮或选择输入上都有 formcontrol。然后您可以在事件单击时发出一个方法，在该方法上您可以订阅更改的值并将其比较或保存到您想要的位置。示例代码 ::::

<mat-select formControlName="transferType"> <mat-option [value]="type" *ngFor="let type of transferTypes" (click)="onChanges()">{{type}}</mat-option> </mat-select>

当我选择一个选项时，我正在调用“onChanges()”方法，然后我订阅此 formControl 并获取更改的值并通过比较操作比较选定的值。

与您可以获取更改值然后将其设置为任何布尔类型变量一样，然后您可以在您的 html 模板中使用*ngIf="" 语句设置任何 div/

如果有任何困惑，请告诉我。谢谢..

angular7 #reactiveforms #formcontrol

【讨论】：

对不起，我的问题没有正确发布，代码被隐藏了。请查看我更新的查询并帮助我
您需要在单独的方法中订阅更改的值，即“onchanges()”，它将在 onInit 方法中调用。正如我在第一次回复中所说，如果反应形式发生任何变化，那么角度将返回包含新状态形式的对象（包括您更改的值）。
@NicoletaWilskon 你能告诉我，你为什么不使用这个formControlName指令？

【解决方案2】：

根据您的问题，我不完全确定您为什么要使用过滤器，因为您没有显示代码。但是，如果您只想重置控件，请在 clearUserValues() 方法中将 this.filterResult = "" 更改为 this.userControl.setValue('')。

另外，由于您订阅了 valueChanges，如果您在 ngOnInit() 中订阅会更好。

检查堆栈闪电战here

【讨论】：

【解决方案3】：

你的 TS 代码会是这样的。

ngOnInit() {
this.onchanges();}

onchanges() {
this.form.get('userControl').valueChanges.subscribe( data => {
    // here you can set your boolean value for condition to show cancel button
     and push the value/or object which you take from input textbox in an your array for further comparison. 
});}

  clearUserValues() { 
  // here you will be set your boolean for hiding cancel button 
  and then you will be set empty state to your formControl input by doing like this.
  this.form.get('userControl').patchValue(//here you will be pass empty string '' or what ever you want set it to.);}

【讨论】：