在 typescript 类文件中获取 Angular 2 Form 对象以手动设置表单属性

Question

我在启动对话控件中有一个表单。我不想在表单标记中使用 ngSubmit 方法，因为我有两个提交方法取决于此表单的某些值。我想在打字稿类文件上手动设置此表单的提交属性。如何在 ts 文件中获取该表单对象以手动设置其“提交”或“有效”属性并根据这些属性做出决定？总之，我怎样才能在我的类文件中控制这个表单来设置或获取它的内部属性。

HTML：

<p-dialog header="Create New Message" [(visible)]="IsShowNewMessageDialog"
      modal="modal" width="800" height="auto" styleClass="modal-blue" appendTo="body">
<form #f="ngForm" name="newMessageForm" (ngSubmit)="f.form.valid" novalidate autocomplete="off">
    <div *ngIf="model && IsShowNewMessageDialog">
        <div class="ui-g">
            <div class="ui-g-11">
                <span style="color:red">{{ErrorMessage}}</span>
            </div>
        </div>

        <div class="ui-g">
            <div class="ui-g-2"><label class="">To</label></div>
            <div class="ui-g-10" [ngClass]="{ 'has-error':  f.submitted && !emailTo.valid }">
                <input type="text" [(ngModel)]="model.emailTo" #emailTo="ngModel"
                       class="text-field"
                       pInputText name="emailTo"
                       placeholder="Email To *" minlength="3"
                       required>
            </div>
        </div>

        <div class="ui-g">
            <div class="ui-g-2"><label class="">CC</label></div>
            <div class="ui-g-10">

                <input type="text" [(ngModel)]="model.cC" #CC="ngModel"
                       class="text-field"
                       pInputText name="CC"
                       placeholder="CC" minlength="3">
            </div>
        </div>

        <div class="ui-g">
            <div class="ui-g-2"><label class="">Bcc</label></div>
            <div class="ui-g-10">

                <input type="text" [(ngModel)]="model.bcc" #BCC="ngModel"
                       class="text-field"
                       pInputText name="BCC"
                       placeholder="BCC" minlength="3">
            </div>
        </div>

        <div class="ui-g">
            <div class="ui-g-2"><label class="">Subject</label></div>
            <div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !subject.valid }">
                <input type="text" [(ngModel)]="model.subject" #subject="ngModel"
                       class="text-field"
                       pInputText name="subject"
                       placeholder="Subject *" minlength="3"
                       required>
            </div>
        </div>

        <div class="ui-g">
            <div class="ui-g-12">
                <p-editor name="emailBodyPlain" #emailBodyPlain="ngModel" [(ngModel)]="model.emailBodyPlain"
                          placeholder="Email Body *" [style]="{'height':'320px'}"
                          minlength="3"></p-editor>

            </div>
        </div>

    </div>

    <div class="text-right pr-5">
        <button class="btn btn-warning" type="button"
                [disabled]="!f.form.valid"
                (click)="sendNewMail(false)" label="Send">
            <i class="fa fa-paper-plane"></i>&nbsp;Send
        </button>
        <button class="btn btn-warning" type="button"
                [disabled]="!f.form.valid"
                (click)="saveNewMail(true)" label="Save">
            <i class="fa fa-floppy-o"></i>&nbsp;Save
        </button>
    </div>
</form>
</p-dialog>

提交方法：

saveNewMail(isDraft) {
    this.messageCenterService.saveNewMail(this.newMail)
        .subscribe(
        data => {
            this.IsShowNewMessageDialog = false;
        },
        error => {
            this.ErrorMessage = error.Message;
        });
}

Answer 1

您可以使用提交按钮上的 (click) 事件来代替 ng-submit，并将表单值传递给组件，检查以下语法：

<button (click)="onSubmit(newMessageForm.value)"></button>

您可以在组件中定义 onSubmit 方法，其参数将包含表单值。 您还可以使用以下方法根据表单有效性禁用按钮：

<button [disabled]="newMessageForm.invalid"></button>