Form with one field - submit issue

[saravanan77]

Submit event is getting triggered on Enter key press even when submit button is in disabled state (disabled="disabled")

This happens only when form has one input field.

In Safari 9x and IE 11, submit action is getting triggered on Enter key press. In chrome it works fine

plnkr.co/edit/l9UURtqV43JBoTqBEJ5J?p=preview

[BarryThePenguin]

This is normal behaviour for forms with a single field. It's detailed in the html specifications. Google will return quite a few people asking a similar question, along with a few different solutions.

One possible solution is to add a second, hidden, input field.

As this isn't specifically a formly issue, I'm going to close this. If you have any more questions, someone should be able to help out

[saravanan77]

I agree .. Form submit trigger even on disabled submit button is part of html specification.

Is that possible for formly to catch that submit event and evaluate all the formly fields are valid or not before triggering associated submit function.

In my example, i have attached length validation to first name field.

                lengthValidation: function($viewValue, $modelValue, scope) {
                  if ($viewValue.length > 3) {
                    return true ;
                  }

                  return false;
                }

[BarryThePenguin]

Sure. I use form.$valid before submit.

Either in the controller

vm.doSubmit = function() {
    if (vm.form.$valid) {
        alert('Submit');
    }
};

or in the template

<formly-form ng-submit="vm.form.$valid && vm.doSubmit()"></formly-form>

[saravanan77]

Is this not a good feature to have in Formly instead of adding $valid check or adding hidden field manually ?

[kentcdodds]

If this is really part of the specification, it's odd and unexpected. In formly we often do things that abstract away the unexpected parts of the specification. So I think a PR to abstract this away would be acceptable. My thinking is to add a hidden field if there's only one field in fields. Could easily accomplish this in the formly-form template right above this line:

<input type="hidden" ng-if="fields.length === 1" />

I'm thinking that should do it. Any pull request should accompany tests. makeapullrequest.com :-)

[BarryThePenguin]

Might be worth pointing out what the specification says about implicit form submission.

The angular docs also talk a bit about form submission and the HTML specification.

[kentcdodds]

Hmmm... I suppose that this might be expected behavior on the part of users. Maybe it's better for the developer to be explicit about how they solve this problem rather than just doing it ourselves.

[BarryThePenguin]

I just a had a quick search through the angular github and found angular/angular.js#3205

I'm not sure of an alternative to what I've already suggested sorry...

[saravanan77]

As you said "In formly we often do things that abstract away the unexpected parts of the specification", i think its worth putting it as part of formly form options.

preventSingleFieldInvalidFormSubmit=true or false(default...normal behavior)

[kentcdodds]

Actually, I'm pretty confident that the API for formly is already too big. You could easily accomplish this with a field transform: https://jsbin.com/yinuda/edit?js,output

app.run(function(formlyConfig) {
  formlyConfig.extras.fieldTransform.push(fieldTransform)

  function fieldTransform(fields) {
    return fields.concat({
      type: 'input',
      templateOptions: {
        type: 'hidden'
      },
      hideExpression: 'fields.length !== 2' // where 2 === this one plus one another.
    })
  }
})

[kentcdodds]

If you'd like, you can create a plugin for this and I'll add it to the plugins list

[saravanan77]

Neat generic solution. :clap: :clap: :clap:

But adding hidden field is not solving this problem in Safari 9x. http://plnkr.co/edit/x7scTQuTz4Qu0iwCgCn7?p=preview

I know this is nothing to do with Formly anyway.