Question

我在Angular 4中有textarea验证，当我在这个textarea中写一些内容时，我输入同时写同一个文本，问题是ng-invalid在输入中ng-valid在textarea中，文本显示在输入中，但仍然是ng-invalid，我怎样才能让这个输入理解它上面写的东西？

这是我的textarea

 <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)]],

        });

Answer 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);
}

在Angular +2中手动设置ng-valid

1 个答案: