Question

如何将来自输入字段（名称）的数据和来自textarea（正文）的数据绑定到我的服务并发布到我的服务器？这有什么特别的方式吗？问题似乎来自我的ngModel绑定到输入。我的代码中缺少什么？提前致谢

组件

<div class="col-sm-11">
    <h1>Tiny MCe</h1>
    <label>Title</label>
    <input name="title" [(ngModel)]="editor.title" placeholder="Subject" type="text" class="form-control" required>
    <div class="tiny">
        <div id="tinyFormGroup" class="form-group">
            <div class="hidden">
                <textarea [(ngModel)]="editor.body" id="baseTextArea">{{body}}</textarea>
            </div>
        </div>
    </div>
    <div class="form-group">
        <button type="button" (click)="sendData()">Send</button>
    </div>
</div>

@Component({
    inputs: ['mceContent'],
    outputs: ['contentChanged'],
    providers:[HttpService]
})

// source of this module - 
// http://www.unitydatasystems.com/blog/2015/12/16/angular-2-tinymce-wysiwyg-editor/

export class EmailComponent {

    private elementRef: ElementRef;
    private elementID: string;



    public contentChanged: EventEmitter<any>;

    constructor(@Inject(ElementRef) elementRef: ElementRef, private httpService:HttpService)
    {
        this.elementRef = elementRef;

        var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
        var uniqid = randLetter + Date.now();

        this.elementID = 'tinymce' + uniqid;
        this.contentChanged = new EventEmitter();
    }

    editor= {

       title:"",
       body: ""

    }

    ngAfterViewInit()
    {
        //Clone base textarea
        var baseTextArea = this.elementRef.nativeElement.querySelector("#baseTextArea");
        var clonedTextArea = baseTextArea.cloneNode(true);
        clonedTextArea.id = this.elementID;

        var formGroup = this.elementRef.nativeElement.querySelector("#tinyFormGroup");
        formGroup.appendChild(clonedTextArea);


        //Attach tinyMCE to cloned textarea
        tinymce.init(
            {


                forced_root_block : "",
                mode: 'exact',
                height: 300,

                theme: 'modern',
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen template',
                    'insertdatetime media table contextmenu paste code'
                ],
                toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ',
                elements: this.elementID,
                setup: this.tinyMCESetup.bind(this)
            }
        );
    }

    ngOnDestroy() {
        //destroy cloned elements
        tinymce.get(this.elementID).remove();

        var elem = document.getElementById(this.elementID);
        elem.parentElement.removeChild(elem);
    }

    tinyMCESetup(ed) {
        ed.on('keyup', this.tinyMCEOnKeyup.bind(this));
    }

    tinyMCEOnKeyup(e) {
        this.contentChanged.emit(tinymce.get(this.elementID).getContent());
    }

    set mceContent(content) {
        this.body = content;
    }

    sendData(){

        this.httpService.sendEmail(this.editor)
        .subscribe(data => {

            console.log(data);
        })


    }
}

Answer 1

您正在克隆您的textarea，因此在此之后将没有ngModel更新，ngModel绑定到一个元素，克隆该元素将不会克隆ngModel行为。您不能在动态创建的元素上使用ngModel。

如果我是你，我会怎么做：

首先创建一个实现ControlValueAccessor的自定义组件输入，以便与ngModel和formControl一起使用。

ControlValueAccessor

控件和本机元素之间的桥梁。

A ControlValueAccessor抽象了将新值写入表示输入控件的DOM元素的操作。

有关详细信息，请参阅DefaultValueAccessor。
在该组件中，在该tinyTeCE实例上的元素上创建tinyMCE实例，侦听输入事件并将更改传播到formControl / ngModel。
然后像任何输入一样使用我的组件： <my-component [(ngModel)]="myModel"></my-component>

使用TinyMce-Angular 2发送电子邮件

1 个答案:

ControlValueAccessor