add option to render NumberType as type="number"

Author: xabbuh

CHANGELOG.md

@@ -4,6 +4,7 @@ CHANGELOG
 4.3.0
 -----
 
+ * added `html5` option to `NumberType` that allows to render `type="number"` input fields
  * deprecated using the `date_format`, `date_widget`, and `time_widget` options of the `DateTimeType` when the `widget`
    option is set to `single_text`
  * added `block_prefix` option to `BaseType`.

Extension/Core/DataTransformer/NumberToLocalizedStringTransformer.php

@@ -77,8 +77,9 @@ class NumberToLocalizedStringTransformer implements DataTransformerInterface
     protected $roundingMode;
 
     private $scale;
+    private $locale;
 
-    public function __construct(int $scale = null, ?bool $grouping = false, ?int $roundingMode = self::ROUND_HALF_UP)
+    public function __construct(int $scale = null, ?bool $grouping = false, ?int $roundingMode = self::ROUND_HALF_UP, string $locale = null)
     {
         if (null === $grouping) {
             $grouping = false;
@@ -91,6 +92,7 @@ public function __construct(int $scale = null, ?bool $grouping = false, ?int $ro
         $this->scale = $scale;
         $this->grouping = $grouping;
         $this->roundingMode = $roundingMode;
+        $this->locale = $locale;
     }
 
     /**
@@ -214,7 +216,7 @@ public function reverseTransform($value)
      */
     protected function getNumberFormatter()
     {
-        $formatter = new \NumberFormatter(\Locale::getDefault(), \NumberFormatter::DECIMAL);
+        $formatter = new \NumberFormatter($this->locale ?? \Locale::getDefault(), \NumberFormatter::DECIMAL);
 
         if (null !== $this->scale) {
             $formatter->setAttribute(\NumberFormatter::FRACTION_DIGITS, $this->scale);

Extension/Core/Type/NumberType.php

@@ -12,8 +12,12 @@
 namespace Symfony\Component\Form\Extension\Core\Type;
 
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Exception\LogicException;
 use Symfony\Component\Form\Extension\Core\DataTransformer\NumberToLocalizedStringTransformer;
 use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\Options;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 
 class NumberType extends AbstractType
@@ -26,10 +30,21 @@ public function buildForm(FormBuilderInterface $builder, array $options)
         $builder->addViewTransformer(new NumberToLocalizedStringTransformer(
             $options['scale'],
             $options['grouping'],
-            $options['rounding_mode']
+            $options['rounding_mode'],
+            $options['html5'] ? 'en' : null
         ));
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        if ($options['html5']) {
+            $view->vars['type'] = 'number';
+        }
+    }
+
     /**
      * {@inheritdoc}
      */
@@ -41,6 +56,7 @@ public function configureOptions(OptionsResolver $resolver)
             'grouping' => false,
             'rounding_mode' => NumberToLocalizedStringTransformer::ROUND_HALF_UP,
             'compound' => false,
+            'html5' => false,
         ]);
 
         $resolver->setAllowedValues('rounding_mode', [
@@ -54,6 +70,15 @@ public function configureOptions(OptionsResolver $resolver)
         ]);
 
         $resolver->setAllowedTypes('scale', ['null', 'int']);
+        $resolver->setAllowedTypes('html5', 'bool');
+
+        $resolver->setNormalizer('grouping', function (Options $options, $value) {
+            if (true === $value && $options['html5']) {
+                throw new LogicException('Cannot use the "grouping" option when the "html5" option is enabled.');
+            }
+
+            return $value;
+        });
     }
 
     /**

Tests/AbstractLayoutTest.php

@@ -1871,6 +1871,23 @@ public function testNumber()
         );
     }
 
+    public function testRenderNumberWithHtml5NumberType()
+    {
+        $this->requiresFeatureSet(403);
+
+        $form = $this->factory->createNamed('name', 'Symfony\Component\Form\Extension\Core\Type\NumberType', 1234.56, [
+            'html5' => true,
+        ]);
+
+        $this->assertWidgetMatchesXpath($form->createView(), [],
+'/input
+    [@type="number"]
+    [@name="name"]
+    [@value="1234.56"]
+'
+        );
+    }
+
     public function testPassword()
     {
         $form = $this->factory->createNamed('name', 'Symfony\Component\Form\Extension\Core\Type\PasswordType', 'foo&bar');

Tests/Extension/Core/Type/NumberTypeTest.php

@@ -75,4 +75,28 @@ public function testSubmitNullUsesDefaultEmptyData($emptyData = '10', $expectedD
         $this->assertSame($expectedData, $form->getNormData());
         $this->assertSame($expectedData, $form->getData());
     }
+
+    public function testIgnoresDefaultLocaleToRenderHtml5NumberWidgets()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE, null, [
+            'scale' => 2,
+            'rounding_mode' => \NumberFormatter::ROUND_UP,
+            'html5' => true,
+        ]);
+        $form->setData(12345.54321);
+
+        $this->assertSame('12345.55', $form->createView()->vars['value']);
+        $this->assertSame('12345.55', $form->getViewData());
+    }
+
+    /**
+     * @expectedException \Symfony\Component\Form\Exception\LogicException
+     */
+    public function testGroupingNotAllowedWithHtml5Widget()
+    {
+        $this->factory->create(static::TESTED_TYPE, null, [
+            'grouping' => true,
+            'html5' => true,
+        ]);
+    }
 }