Validate form on submission in reactive-form FormGroup #14527

Activity

1. DzmitryShylovich commented on Feb 16, 2017

   

   DzmitryShylovich

   on Feb 16, 2017

   Contributor

   More actions

   And submit button will be disabled by default. Which works fine and good in a way.
   But i also need to be able to enable the submit button by default.

   can you add a plunkr?
2. preetham1290 commented on Feb 16, 2017

   

   preetham1290

   on Feb 16, 2017

   Author

   More actions

   Here is the plunker link
   https://plnkr.co/edit/2lTTIWxO1acUxsJHDkje?p=preview

   Button is disabled by default. Also form is getting validated on input changes.
   Instead my requirement is submit button should be enabled by default, when user clicks on submit form should then validate and display appropriate error message if any.
3. ritikrishu commented on Feb 16, 2017

   

   ritikrishu

   on Feb 16, 2017

   More actions

   @preetham1290
   you plunker is not running on my system for some reason, but I see you have written some thing like:

   <button type="submit" class="btn btn-default"
                [disabled]="!heroForm.valid">Submit</button>
   

   I guess disabled button should be the expected behaviour while form is invalid. BTW if you need your application to act on submit instead of doing asynchronous checks for validation and all, you can make simple template driven form for your use case.

   👍React with 👍2Reacted by Akhil Antony K and suvarnapmath
4. kara

   added

   area: forms

   freq1: low

   featureLabel used to distinguish feature request from other issuesLabel used to distinguish feature request from other issues

   on Feb 17, 2017
5. kara commented on Feb 17, 2017

   

   kara

   on Feb 17, 2017

   Last edited by kara

   Contributor

   More actions

   @preetham1290 If I'm understanding correctly, you want your submit button to be enabled until submission, then disabled if the form fails to validate?

   You can actually achieve this already with the submitted flag on the top level form directive.

   <form [formGroup]="heroForm" #formDir="ngForm">
     <div *ngIf="heroForm.hasError('required', 'name') && formDir.submitted">
        Name is required.
     </div>
      <input formControlName="name">
      <input formControlName="power">
      <button [disabled]="heroForm.invalid && formDir.submitted">
         Submit 
      </button>
   </form>

   Validation will still occur on value change, but the errors and the button disabling will not appear until the submit event.

   I updated your plunker with an example: https://plnkr.co/edit/V45rysvHGfgc8sBig1Ds?p=preview

   Is that what you're looking for, or is there a specific reason you'd like to wait to run validation? With how forms are set up now, the form status is kept up to date whenever the value changes, but you have complete control over when and how the UI changes to reflect the new status.

   👍React with 👍16Reacted by Theophilus Omoregbee, luisalbertonavarro, Bedini Fabio aka whisher , Alex, Piotr Jankowski, Marcel Német, Jhonatan Acevedo Martínez, Akhil Antony K, Scott Harsla, Manis Takaur and 6 more
6. kara commented on Aug 12, 2017

   

   kara

   on Aug 12, 2017

   Last edited by kara

   Contributor

   More actions

   @preetham1290 We added a feature in 5.0.0-beta.3 to allow applications to delay validation until submit. See the PR here.

   👍React with 👍2Reacted by Ritik Rishu and Kasper Ziemianek

   👎React with 👎1Reacted by emirhosseini
7. kara

   closed this as completedon Aug 12, 2017
8. laxmikanta415 commented on Oct 24, 2017

   

   laxmikanta415

   on Oct 24, 2017

   More actions

   Reseting the form in simple javascript is the solution for now.

   var form : HTMLFormElement = 
   <HTMLFormElement>document.getElementById('id');
   form.reset();
   
9. angular-automatic-lock-bot commented on Sep 13, 2019

   

   angular-automatic-lock-botBot

   on Sep 13, 2019

   More actions

   This issue has been automatically locked due to inactivity.
   Please file a new issue if you are encountering a similar or related problem.

   Read more about our automatic conversation locking policy.

   _{This action has been performed automatically by a bot.}
10. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Sep 13, 2019