I have a form inside a PrimeNG dialog control. I need to handle two different submit methods based on certain conditions for this form, so I don't want to use the ngSubmit method in the form tag. Instead, I want to manually access the form object in my TypeScript class file to set its "submitted" or "valid" properties and make decisions based on that. How can I achieve this? Essentially, how do I gain control over the form in my class file to manipulate its internal properties?
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> 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> Save
</button>
</div>
</form>
</p-dialog>
Submit Method:
saveNewMail(isDraft) {
this.messageCenterService.saveNewMail(this.newMail)
.subscribe(
data => {
this.IsShowNewMessageDialog = false;
},
error => {
this.ErrorMessage = error.Message;
});
}