在角度 +2 中手动设置 ng-valid

  • 本文关键字:设置 ng-valid angular
  • 更新时间 :
  • 英文 :


>我在 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);
}

最新更新