在响应式表单中复制ngModel的行为——Angular

Question

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

但是这次，我想在响应式表单中使用那个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>

我像这样使用过滤器管道:

<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的行为呢?它会实时地把数据发送给变量"searchValue">

Answer 1

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

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