forms - touched - reset form angularjs

AngularJS-Cómo activar el envío en forma anidada

Question

Estoy creando un formulario que genera una invitación cuando se envía. La invitación tiene varios campos, uno de los cuales es una entrada de dirección de correo electrónico con un botón ''agregar'', que al hacer clic debe agregar esa dirección a una lista de direcciones de correo electrónico que deben recibir la invitación.

Esto se puede hacer con un solo formulario, sin embargo, si el usuario pulsa la tecla Intro mientras escribe un correo electrónico, activa el submit en todo el formulario. Me gustaría que el resultado de la tecla Intro, cuando el campo de entrada del correo electrónico está enfocado, tenga el mismo efecto que hacer clic en el botón "Agregar". Esperaba que la forma correcta de resolver esto sería anidar un formulario de entrada de correo electrónico dentro del formulario de invitación, algo como esto:

    <ng-form ng-submit="sendInvite()">
        <input type="text" placeholder="Title" ng-model="invitation.title"/>

        <ng-form ng-submit="addInvitee()">
            <input type="email" placeholder="Title" ng-model="inviteeEmail"/>
            <button class="btn" type="submit">add</button>
        </ng-form>

        <button class="btn" type="submit">Send</button>
    </ng-form>

Con el siguiente javascript en el controlador:

    $scope.addInvitee = function() {
        $scope.invitation.emails.push($scope.inviteeEmail);
        $scope.inviteeEmail = '''';
    }

    $scope.sendInvite = function() {
        //code to send out the invitation
    }

Mi problema es que al anidar los formularios (y al hacerlo se convirtió de <form> a <ng-form> , el envío de uno de los dos ya no funciona.

Plunker aquí

Answer 1

Puede usar una de las siguientes dos formas para especificar a qué método javascript debe llamarse cuando se envía un formulario:
* ngSubmit directiva en el elemento de formulario
* Directiva ngClick en el primer botón o campo de entrada del tipo enviar (entrada [tipo = enviar])
- formulario docs

<ng-form>
   <input type="text" placeholder="Title" ng-model="invitation.title"><br>
   <ng-form>
     <input type="email" placeholder="Title" ng-model="inviteeEmail">
     <button class="btn" ng-click="addInvitee()">add</button><br>
   </ng-form>
   <ul class="unstyled">
     <li ng-repeat="invitee in invitation.invitees">
        <span>{{invitee.email}}</span>
     </li>
   </ul>
   <button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>

Plunker

Answer 2

Cuando se envía el formulario, puede encontrar todos los formularios anidados utilizando algo como a continuación

forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))

Aquí, la forma es el controlador de la forma externa que se envió. Puede enganchar este código en su correo electrónico, y encontrar todos los formularios anidados y hacer lo que sea necesario.

Nota: Esto es coffeescript.

Answer 3

Tengo un requisito similar: asistente de forma de varios pasos. Cuando el usuario hace clic en el botón ''Siguiente'', debo validar el formulario de pasos actual.

Podemos desencadenar la validación $validate el evento '' $validate '' en el scope vinculado al formulario.

isFormValid = function($scope, ngForm) {
    $scope.$broadcast(''$validate'');
    if(! ngForm.$invalid) {
      return true;
    }
}

Cuando quiera comprobar si los valores del formulario son correctos, llamaré a isFormValid con la instancia de scope & form.

Código de trabajo: enlace Plunker

También es útil tener poca lógica adicional en isFormValid (incluido en el Plunker anterior) que hace que los campos de formulario y formulario $dirty ya que estaríamos mostrando / ocultando mensajes de validación en función de su estado de $dirty .