angular7 #reactiveforms #formcontrol

Question

我想使用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;
  }

pipe.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);
  }

}

Answer 1

首先，您必须了解模板驱动和反应形式方法之间的区别。当formcontrol中发生任何更改时，它将返回form的新对象（包括其formcontrols），这就是使其成为同步方法的原因。让我在简短的情况下总结一下。

当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

Answer 2

您的TS代码将是这样。

[]

Answer 3

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

另外，由于您订阅了 valueChanges，所以最好在 ngOnInit() 中进行。

检查 stackblitz here

如何通过formcontrol而不是ngModel使用NgIF条件

3 个答案:

angular7 #reactiveforms #formcontrol