2

我有 2 个文本区域，如果用户输入或插入值，也需要在其他文本区域字段上进行更新。

我可以使用该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>

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

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

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

4

3 回答 3

4

如果这就是你正在做的事情，那么没有理由将 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

于 2019-08-18T16:51:41.847 回答
2

注意：“在 Angular 6 中不推荐将 Reactive Froms 与 ngModel 一起使用，并将在 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>

工作stackbliz示例

于 2019-08-18T04:47:05.903 回答
0

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

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

@NgModule({
    imports: [
         FormsModule      
    ]
于 2019-08-18T04:02:12.923 回答