>我在 Angular 4 中有带有验证的文本区域,当我在这个文本区域中编写一些东西时,我有同时写入相同文本的输入,问题是ng-invalid
在输入中,ng-valid
在文本区域中,文本显示在输入中但仍然ng-invalid
,我如何让这个输入理解上面写了一些东西?
这是我的文字区
<textarea class="form-control post-text-input" placeholder="" id="post_box"
formControlName="post-content" (change)=" checkText(post.postText)"
ngModel)]=" post.postText">
</textarea>
这是输入
<input formControlName="post-content" type="text" (change)=" checkText(post.postText)"
[(ngModel)]=" post.postText" class="input-text-write emojionearea1"
style="padding: 0 25px;"/>
更新
这是自动创建的div 而不是输入:
<div class="emojionearea-editor" contenteditable="true" placeholder="" tabindex="0"
dir="ltr" spellcheck="false" autocomplete="off" autocorrect="off"
autocapitalize="off">da
</div>
这是我的验证:
/* Post Form Validation*/
this.postForm = fb.group({
'post-content': [null, [Validators.required, Validators.minLength(1)]],
});
形成编辑,很明显您正在为字段post-content
使用响应式表单,如果您使用的是响应式表单方法,那么[(ngModel)]=" post.postText"
将设置值,但它不是正确的方法。
您必须使用setValue
函数来设置控件的值。 所以你的代码会像
.html
<textarea class="form-control post-text-input" placeholder="" id="post_box"
formControlName="post-content" (change)=" checkText(post.postText)"
ngModel)]=" post.postText">
</textarea>
<input formControlName="post-content" type="text"
(change)="checkText(post.postText)"
class="input-text-write emojionearea1" style="padding: 0 25px;"/>
TS 文件
this.postForm = fb.group({
'post-content': [null, [Validators.required,
Validators.minLength(1)]],
});
//please do change here , right now your both control calling this function
//make appropriate change
checkText(text) {
this.postForm.get('post-content').setValue(text);
}