[英]ngModel for textarea not working in angular 2
I am trying to print json object in textarea using ngModel
.我正在尝试使用 ngModel 在 textarea 中打印 json
ngModel
。
I have done following:我做了以下工作:
<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
</textarea>
I want to load the json object in textarea.我想在 textarea 中加载 json object。 The above code is loading the
rapidPage
object in textarea but its showing textarea value as [object Object]
.上面的代码在 textarea 中加载
rapidPage
object 但它的 textarea 值显示为[object Object]
。
object: object:
this.rapidPage = {
"pageRows": [
{
"sections": [
{
"sectionRows": [
{
"secRowColumns": [
]
},
{
"secRowColumns": [
{
"colName": "users"
}
]
},
{
"secRowColumns": [
{
"colName": "sample"
}
]
}
],
"width": 0
}
]
}
],
"pageName": "DefaultPage",
"pageLayout": "DEFAULT_LAYOUT",
"editMode": true
};
I want to load the data as string.我想将数据加载为字符串。 any inputs?
任何输入?
Assuming that you want to bind rapidPage
as it is and will only write valid JSON in the textArea.假设您希望按
rapidPage
绑定rapidPage
,并且只会在 textArea 中写入有效的 JSON。
PARSE
it when changing the value, and STRINGIFY
when showing in textarea.PARSE
它改变值时,和STRINGIFY
在textarea的显示时。Do the following in your Component code在您的组件代码中执行以下操作
rapidPage = {"pageRows":[{"sections":[{"sectionRows":[{"secRowColumns":[]},{"secRowColumns":[{"colName":"users"}]},{"secRowColumns":[{"colName":"sample"}]}],"width":0}]}],"pageName":"DefaultPage","pageLayout":"DEFAULT_LAYOUT","editMode":true};
// your object
get rapidPageValue () {
return JSON.stringify(this.rapidPage, null, 2);
}
set rapidPageValue (v) {
try{
this.rapidPage = JSON.parse(v);}
catch(e) {
console.log('error occored while you were typing the JSON');
};
}
Template Usage:模板用法:
<textarea [(ngModel)]='rapidPageValue' rows="30" cols="120">
</textarea>
<textarea class="form-control"
name="message"
rows="8"
[(ngModel)]="Obj.message"
#message='ngModel'
></textarea>
for Two way binding You just need to add attribute in textarea tag name="message"
, ONLY [(ngModel)]
works 100%!.对于双向绑定您只需要在 textarea 标签
name="message"
添加属性,只有[(ngModel)]
工作 100%!。
For binding textarea values in Angular 2 you can use the change-function:要在 Angular 2 中绑定 textarea 值,您可以使用更改功能:
<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea>
export class AppComponent implements OnInit {
private textareaValue = '';
doTextareaValueChange(ev) {
try {
this.textareaValue = ev.target.value;
} catch(e) {
console.info('could not set textarea-value');
}
}
}
Unless you really want to have sync in between, you would normally implement a button to save/apply the change when it's finished json editing.除非您真的想要在两者之间进行同步,否则您通常会在完成 json 编辑后实现一个按钮来保存/应用更改。 If that is the case, your render is easy.
如果是这种情况,您的渲染很容易。
<textarea #textbox>{{ rapidPage | json }}</textarea>
Make sure no other space or return character in between the above line.确保上面的行之间没有其他空格或返回字符。
Then an traditional button, ex.然后是一个传统的按钮,例如。
<a (click)="updateRapidPage(textbox.value)">Apply</a>
I found this is better in some case than brutal [(rapidPage)]
.我发现这在某些情况下比残酷的
[(rapidPage)]
更好。
You can also use @ViewChild('textbox') input
inside the component to access this variable.您还可以在组件内使用
@ViewChild('textbox') input
来访问此变量。
ngModel works if ngModel 工作,如果
If you not you can use the following syntax to achieve the same effect如果没有,您可以使用以下语法来达到相同的效果
<textarea [value]="strVariableInComponent" (input)="strVariableInComponent = $event.target.value;"></textarea>
Can you test with this:你能用这个测试吗:
<textarea #textbox (change)="text = textbox.value" style="width:100%;">{{ text }}</textarea>
Regards问候
As per documentation [()] is for two way syntax sugar to remove the boilerplate.根据文档 [()] 是用于删除样板的两种语法糖。 What event is being invoked at this?
这里正在调用什么事件? Irrespective, you can put a string output also alongwith the event in below code
无论如何,您也可以在下面的代码中将字符串输出与事件一起放置
Probably try the below code implemetation for your string output可能会为您的字符串输出尝试以下代码实现
@Directive({
selector: '[ngModel]',
host: {
"[value]": 'ngModel',
"(input)": "ngModelChange.next($event.target.value)"
}
})
class NgModelDirective {
@Input() ngModel:any; // stored value
@Output() ngModelChange:EventEmitter; = new EventEmitter() // an event emitter
}
You can stringify
your json and use in the ngModel like this -您可以像这样将 json
stringify
并在 ngModel 中使用 -
<textarea style="height:100px; width:300px;background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
</textarea>
ArrayDemo: Array<any> = [{"name":"pardeep","last":"jain"}]
rapidPage = JSON.stringify(this.ArrayDemo);
Working Example Working Example工作示例工作示例
Browser shows [object object]
because angular unables to parse the JSON the asign the value in ngModel you must need a string so convert this using JSON.stringify
浏览器显示
[object object]
因为 angular 无法解析 JSON 指定 ngModel 中的值你必须需要一个字符串所以使用JSON.stringify
转换它
I find that importing FormsModule
from @angular/forms
solves the issue.我发现从
@angular/forms
导入FormsModule
可以解决这个问题。
In app.module.ts
在
app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
FormsModule
],
...
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.