时间戳

首页 > 解决方案 > 如何从 Javascript 设置 Angular formcontrol 字段的值？

javascript - 如何从 Javascript 设置 Angular formcontrol 字段的值？

问题描述

我的表单组中有一个“叙述”字段。我已将Nanospell Javascript 拼写检查器添加到我的项目中。

如果有拼写错误的单词并且我让拼写检查器更改它们，拼写检查器会执行其工作并将更正的文本字符串写入window.form1.narrative.value. 但是，基本的 formcontrol 值仍然是以前拼写错误的单词，除非我在拼写检查完成后在该字段中物理键入或退格一个附加字符。任何用户都不会这样做。拼写检查完成后，他们将单击保存。拼写检查器具有onDialogCompleteJavascript 功能。

如何使用该 Javascript 函数将文本框中的更新值设置为 formcontrol 值，以便保存拼写正确的文本？

标签： javascriptangulartypescriptform-control

解决方案

这是一个完整的 Angular 解决方案，可以让这一切发生:-)

import { Component, OnInit, Input, OnDestroy, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EditorFieldInfo } from '@app/shared/models/editorfieldinfo';

import 'tinymce';
declare let tinymce: any;

@Component({
  selector: 'rich-text-field',
  templateUrl: './rich-text-field.component.html'
})
export class RichTextFieldComponent implements OnInit, OnDestroy, AfterViewInit {

  formControl: FormControl;

  editor: any;

  @Input()
  formGroup: FormGroup;

  @Input()
  fieldDefinition: EditorFieldInfo;

  constructor() { 
    this.fieldDefinition = { name: '??', description:'', placeholder:'', hint:'', fieldtype:'', length:0, defaultValue:'', listValues: null};      
  }

  ngOnInit(): void 
  {
    this.formControl = <FormControl> this.formGroup.get(this.fieldDefinition.name);         
  }
  
  ngAfterViewInit() { 

    let textAreaElement = 'mce-' + this.fieldDefinition.name;

    this.formControl.valueChanges.subscribe( _ => {
      tinymce.init({
        base_url: '/tinymce',
        suffix: '.min',
        selector: '#' + textAreaElement,
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
        menubar: 'edit insert format table tools', branding: false, placeholder: '',
        external_plugins: {'placeholder': '/assets/scripts/placeholder.min.js'},
        content_style: 'body {font-weight: 400;line-height:1.125;font-family:RO Sans,Calibri,sans-serif;letter-spacing:normal;}',
        setup: editor => { 
          this.editor = editor; 
          editor.on('change', _ => this.formControl.setValue(editor.getContent()));                      
        }
      });  
    });

  }

  ngOnDestroy() {
    tinymce.remove(this.editor);   
  }
}

推荐阅读