Question

我在主要对话控件中有一个表格。我不想在表单标签中使用ngSubmit方法，因为我有两个提交方法取决于此表单的某些值。我想在打字稿类文件上手动设置此表单的Submit属性。如何在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>

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

1 个答案: