Получить объект формы Angular 2 в файле классов машинописи, чтобы установить свойства формы вручную - PullRequest
Новая
       11

Получить объект формы Angular 2 в файле классов машинописи, чтобы установить свойства формы вручную

0 голосов
/ 06 июля 2018

У меня есть форма в простом диалоговом элементе управления. Я не хочу использовать метод 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;
        });
}

1 Ответ

0 голосов
/ 06 июля 2018

Вместо ng-submit вы можете использовать событие (щелчок) на кнопке отправки и можете передать значения формы компоненту, проверяя следующий синтаксис: 

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

Вы можете определить метод onSubmit в компоненте с параметром, который будет содержать значение формы. Вы также можете использовать следующее для отключения кнопки в зависимости от срока действия формы: 

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