如何使用带有表单控件名称的“ngModel”？答案

【问题标题】：How to use 'ngModel' with form control name?如何使用带有表单控件名称的“ngModel”？
【发布时间】：2020-09-09 00:02:44
【问题描述】：

我有 2 个 textarea，如果用户输入或插入值，也需要更新其他 textarea 字段。

我可以使用change 函数来执行此操作，但我尝试使用带有控件名称的 ng-model。得到错误。如何解决这个问题？或者我们不能使用带有 ngmodel 的控件名称来收集？

这是我的文本区域：

<textarea name="control-name" [(ngModel)]="control_name_text" formControlName="ControlName"  [ngModelOptions]="{standalone: true}" cols="85" rows="5" placeholder="Enter Control Name"></textarea>

另一个：

<textarea name="pageUrl" [value]="control_name_text"  cols="85" rows="5" placeholder=""></textarea>

我也在 ts 文件中声明了 control_name_text -。得到错误：

Can't bind to 'ngModelOptions' since it isn't a known property of 'textarea'.

有什么帮助吗？提前致谢。

【问题讨论】：

您是否在您的app.module.ts 中导入FormsModule？
在 .html 中，您可以获得像 [value]="myForm.get('myControlName').value" 这样的反应式表单控件的值 - 如果您有一个带有 formControl“myControlName”的 formGroup“myForm”。不要使用 [(ngModel)]
请看这个：angular.io/guide/reactive-forms 您需要知道的一切。首先，不要将 ngModel 与响应式表单一起使用。

标签： angular angular-forms angular8

【解决方案1】：

如果您正在这样做，则没有理由将 ngModel 与反应式表单一起使用。

在这种情况下，您可以从表单控件中获取值并将其用作输入值

<form [formGroup]="exampleForm">
  <textarea formControlName="userText" cols="85" rows="5" ></textarea>
  <textArea [value]="userText"> </textArea> 
</form>

这不是必需的，但在您的组件中，您还可以使用 get 属性缩短 formControl 引用。

get userText() {return this.exampleForm.get('userText').value }

示例： https://stackblitz.com/edit/angular-sjn6du

【讨论】：

【解决方案2】：

注意：“Using Reactive Froms with ngModel is deprecated in angular 6 and will be removed in angular 7”

所以你必须从第一个文本区域中删除formControlName="ControlName"。

<textarea name="control-name" [(ngModel)]="control_name_text"   [ngModelOptions]="{standalone: true}" cols="85" rows="5" placeholder="Enter Control Name"></textarea>

<textarea name="pageUrl" [value]="control_name_text"  cols="85" rows="5" placeholder=""></textarea>

编辑 2

如果你想使用响应式表单，请像这样使用

<form [formGroup]="groupForm" >
  <textarea  formControlName="name" placeholder="Group Name" #textArea>
  </textarea>
</form>
<textarea name="" id="" cols="" rows="" [value]="textArea.value" [(ngModel)]="control_name_text"></textarea>

working stackbliz example

【讨论】：

我使用的是响应式表单，因此需要进行验证。如果我删除它，我如何使用反应形式进行验证？
您不能同时使用响应式表单和 ngModel，因为该功能在 angular6 中已被贬低
在第二个选项中，你应该添加[ngModelOptions]="{standalone: true}"以避免ngModel不能用于注册带有父formGroup指令的表单控件错误。例如:<textarea name="" id="" cols="" rows="" [value]="textArea.value" [(ngModel)]="control_name_text" [ngModelOptions]="{standalone: true}"></textarea> 为了避免注册这个表单控件，我们需要在 ngModelOptions 中指明它是独立的。

【解决方案3】：

您发布的 HTML 模板看起来不错。要对表单输入使用双向数据绑定，您需要在 Angular 模块中导入 FormsModule 包。

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
         FormsModule      
    ]

【讨论】：

但是我已经有了表单模块。除非添加这个字段都运行良好