habe ich eine einfache Form, die wie diese von außenAngular2 - Validate und legt Form von außerhalb
<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>
und müssen einreichen die die Form und überprüfen Sie die Gültigkeit aussieht.
Fand heraus, wie es geht:
<formname>.ngSubmit.emit()<formname>.form.validBeispiel einreichen:
<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>
<button class="btn-save button primary"
(click)="documentEditForm.ngSubmit.emit()"
[disabled]="!documentEditForm.form.valid">SAVE</button>
Die richtige Art und Weise zu tun, ist tatsächlich
<form (ngSubmit)="save()" id="ngForm" #documentEditForm="ngForm">
...
</form>
<button class="btn-save button primary" form="ngForm" [disabled]="!documentEditForm.form.valid">
SAVE
</button>
Das Formular muss eine ID haben id="example-form" und die Submit-Button eine passende ID in der form="example-form"
Dies sollte die akzeptierte Antwort sein. – choxnox
Ich möchte nur noch eine Sache hinzufügen. Es scheint, als wäre eckig nicht daran interessiert, dass die Schaltfläche deaktiviert wird, sobald sie außerhalb der Form ist - d. H., Wenn Sie die Eingabetaste auf einem Eingabeelement drücken, wird sie immer noch versuchen, sie einzureichen. Ich bin mir nicht sicher, ob dies wirklich ein Fehler in Angular selbst ist oder es eine andere Lösung gibt. Ein schneller Workaround dafür wäre einfach zu gehen (ngSubmit) = "form.valid && save()" – Yodacheese
fyi IE & Edge unterstützen nicht das Attribut 'form' auf 'button', so dass dies nicht funktioniert (so viel ich weiss). – BOb
Ein Trick, der für mich gearbeitet mit
war:
<!-- 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>
Wenn Sie Reactive Forms verwenden, um die formGroup ungültige Eigenschaft verwenden die Senden-Schaltfläche deaktivieren:
<button
form="ngForm"
[disabled]=" editor.invalid>Enviar</button>
...
<form [formGroup]="editor" id="ngForm" (ngSubmit)="save()" novalidate >
...
</form>
ngSubmit ist nicht definiert –
@VievChild ('documentEditForm') documentEditForm: FormGroupDi rekativ; auch benötigt –
Wenn ich emit dann auch meine ngForm's submited (Boolean-Eigenschaft) wird nicht auf wahr. Kannst du mir bitte helfen. –