Question

我有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>

我也在ts文件中声明了control_name_text-。错误提示为：

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

有什么帮助吗？预先感谢。

Answer 1

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

vorpal_sword

Answer 2

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

所以您必须从第一个文本区域中删除export default function userReducer(state = initialState, action) { switch(action.type) { case SET_FRIENDS: return Object.assign({}, state, { friends: action.payload }); // Change to `return state;` default: return initialState; } }。

formControlName="ControlName"

编辑2

如果您想使用反应形式，请像这样

<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>

working stackbliz example

Answer 3

如果您正在这样做，则没有理由将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

Answer 4

似乎您在与formControlName相同的表单字段上使用ngModel。支持将ngModel输入属性和ngModelChange事件与反应形式指令已在Angular v6中弃用，并将被删除在Angular v7中。

有关此的更多信息，请参见此处的API文档： https://angular.io/api/forms/FormControlName#use-with-ngmodel

如何在表单控件名称中使用“ ngModel”？

4 个答案: