Forms in Angular 4 are coded quite differently to AngularJS 1 forms with the main differences being in the code structure with the latest code using techniques such as reactive forms which are template driven (vs model driven) rather than directive/component based. I’m going to do a demo on this soon so i’ll cover more about how you can set a form up quickly then. Also there is already some Form validation examples which can help extend your form once you have it up and running.
Here are about 10 or so Angular 4 Forms Demos to help you get started. Enjoy!
1. Angular 4 Reactive Signup Form Example
This password Match Validator simply takes a FormGroup (you don’t have to care about this because it is handled by Angular) and returns a validator response when the values of the controls form the passed FormGroup are equal.
2. Angular 2 Forms Example
Angular 2 form is a place where we give the user the possibility to enter some data (inputs). Angular 2 form allow the coordination of multiple user actions: watch data changes, data validation, errors detection.
3. Angular 2 ngForms Example
Wijmo for Angular 2 components can be used in Angular Forms in the same way as native HTML input controls. The ngModel Angular directive augments Wijmo components with its functionalities like validation, adding the control’s state to the form instance, automatic styling of the control using state CSS classes (like ng-dirty and ng-invalid) of ngModel. When an ngModel is used on a Wijmo component, it establishes a binding for the “main value” property of the component.
4. Bootstrap Select2 Form Demo
Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select. Select2 comes with AJAX support built in, using jQuery’s AJAX methods.
5. Angular 2 Reactive Forms
Angular (v2+) presents two different methods for creating forms, template-driven (what we were used to in AngularJS 1.x), or reactive. We’re going to explore the absolute fundamentals of the reactive Angular forms, covering ngForm, ngModel, ngModelGroup, submit events, validation and error messages.
6. Angular JSON Schema Form Demo
Schema Form is a set of AngularJS directives (and a couple of services) to generate Bootstrap 3 ready forms from a JSON Schema. Schema Form was built to be extended and its easy to create your own form field types that suit your specific requirement.
7. angular-formly Example
angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms. The formly-form directive and the formlyConfig service are very powerful and bring unmatched maintainability to your application’s forms.
8. Angular 4 Forms Tutorial From Scratch
There are two ways to build forms in angular 4. First one is Template-Driven-Forms and second one is Reactive-Forms which share same @angular/forms library.
9. Angular 4 Reactive Forms Tutorial
Reactive forms give you the ability to control validation from the component code, plus you’re able to unit test them. These are the couple advantages that reactive forms have over template-driven forms, which we won’t be covering in this tutorial.
10. ng2 Reactive Multiple Nested Forms
Reactive forms or data driven forms are a totally new approach taken by the angular team. With Reactive forms we don’t rely heavily on template for structuring our forms rather we use the underlying API’s exposed by angular which is called the Reactive API and can be used by importing a module called ReactiveModule to create the forms.