Ho una forma semplice che assomiglia a questoAngular2 - Convalida e presentare il modulo dall'esterno
<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>
e la necessità di inviare la forma e controllarne la validità dall'esterno.
scoperto come farlo:
<formname>.ngSubmit.emit()<formname>.form.validEsempio:
<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>
<button class="btn-save button primary"
(click)="documentEditForm.ngSubmit.emit()"
[disabled]="!documentEditForm.form.valid">SAVE</button>
Il modo corretto di fare è in realtà
<form (ngSubmit)="save()" id="ngForm" #documentEditForm="ngForm">
...
</form>
<button class="btn-save button primary" form="ngForm" [disabled]="!documentEditForm.form.valid">
SAVE
</button>
La forma deve avere un ID id="example-form" e il pulsante di invio di un ID corrispondente nel form="example-form"
Questa dovrebbe essere la risposta accettata. – choxnox
Voglio solo aggiungere un'altra cosa. Sembra che l'angolare non si preoccupi del fatto che il pulsante venga disattivato una volta che si trova all'esterno del modulo, ovvero se si preme Invio su un elemento di input, esso tenterà comunque di inviarlo. Non sono sicuro se questo è davvero un bug in Angular stesso o c'è un'altra soluzione. Una soluzione rapida sarebbe solo andare (ngSubmit) = "form.valid && save()" – Yodacheese
fyi IE & Edge non supportano l'attributo 'form' sul 'pulsante', quindi questo non funzionerà lì (per quanto ne so). – BOb
Un trucco che ha funzionato per me usando
è stato questo:
<!-- real button will simulate click on invisible button (cf. form) -->
<button onclick="document.getElementById('hiddenSaveButtonForMicrosoftWithLove').click()">
The Real Button outside forms
</button>
<form>
<!-- will be called in the background and is never visible -->
<button id="hiddenSaveButtonForMicrosoftWithLove" type="submit" style="display: none;">hiddenSaveButtonForMicrosoftWithLove</button>
</form>
Se si utilizzano moduli reattivi utilizzare la proprietà non valida formGroup per disabilitare il pulsante di invio:
<button
form="ngForm"
[disabled]=" editor.invalid>Enviar</button>
...
<form [formGroup]="editor" id="ngForm" (ngSubmit)="save()" novalidate >
...
</form>
ngSubmit non è definito –
@VievChild ('documentEditForm') documentEditForm: FormGroupDi rettiva; anche necessario –
Se chiamo emettere allora anche la mia submission (proprietà booleana) del mio ngForm non è cambiata in true. Puoi aiutare per favore. –