在反应形式中复制 ngModel 的行为 - Angular

Question

我用 ngModel 做了一个带有过滤器 pipe 的搜索框，效果很好。

但是这一次，我想在响应式表单中使用那个 searchBox。 它不起作用，因为我在控制台中有一个很大的红色错误。

ERROR Error: 
  ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.

  Option 1: Use formControlName instead of ngModel (reactive strategy):

  
<div [formGroup]="myGroup">
   <div formGroupName="person">
      <input formControlName="firstName">
   </div>
</div>

In your class:

this.myGroup = new FormGroup({
   person: new FormGroup({ firstName: new FormControl() })
});

  Option 2:  Update ngModel's parent be ngModelGroup (template-driven strategy):

  
<form>
   <div ngModelGroup="person">
      <input [(ngModel)]="person.name" name="firstName">
   </div>
</form>
at Function.formGroupNameException (forms.js:4939)
at NgModel._checkParentType (forms.js:5260)
at NgModel._checkForErrors (forms.js:5252)
at NgModel.ngOnChanges (forms.js:5193)
at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1506)
at callHook (core.js:2525)
at callHooks (core.js:2492)
at executeInitAndCheckHooks (core.js:2443)
at selectIndexInternal (core.js:8396)
at Module.ɵɵadvance (core.js:8379)

当我将搜索框移到表单外时，它工作正常。

<div class="searchBox">
        <fa-icon [icon]="faSearch" size="1x"></fa-icon>
        <input type="search" placeholder="Rechercher une organisation" clrInput class="searchInput"
          [(ngModel)]="searchValue">
      </div>

我像这样使用过滤器 pipe：

<div *ngFor="let orga of (ListOrgaAndDoctors | filter:searchValue)">
          <clr-radio-wrapper>
            <input type="radio" clrRadio [value]="orga.id" name="orga" formControlName="orga" />
            <label>{{orga.name}}</label>
          </clr-radio-wrapper>
        </div>

如何在不使用 ngModel 的情况下复制 ngModel 的行为，该行为将数据实时发送到变量“searchValue”？

Answer 1

不要在反应式 forms 中使用ngModel 。 如果您需要动态更改表单字段中的值 - 使用方法patchValue() 。

文档： https://angular.io/api/forms/FormGroup#patchValue