<commit_before>---
layout: post
title: Custom Form Controls in Angular
imageUrl: /images/banner/custom-form-controls-in-angular-2.jpg
date: 2016-07-27T00:00:00.000Z
update_date: 2016-12-18T00:00:00.000Z
summary: >-
  Angular makes it very easy to create custom form controls. Read on to learn
  how to do it!
categories:
  - angular
tags:
  - angular2
  - forms
topic: forms
demos:
  - url: 'http://embed.plnkr.co/035BWnCCvSuchgpO1b9Z/'
    title: Custom number input control
author: pascal_precht
related_posts:
  - Validators Pipeline in Angular 1.3
  - Two-way Data Binding in Angular
  - Reactive Forms in Angular
  - Template-driven Forms in Angular
  - Custom Validators in Angular
  - Testing Angular Directives with Custom Matchers
related_videos:
  - '189792758'
  - '189785428'
  - '175255006'
  - '193524896'
  - '175218351'
  - '189618526'

---


There are many things that Angular helps us out with when creating forms. We've covered several topics on [Forms in Angular](/forms-in-angular-2), like model-driven forms and template-driven forms. If you haven't read those articles yet, we highly recommend you to do so as this one is based on them. [<NAME>](http://twitter.com/kryptos_rsa), one of our training students, who later on contributed to the official documentation as part of the Docs Authoring Team for Angular, has also written a very nice [introduction](http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel) to creating custom controls.<commit_msg>fix: update custom form control demo with fix<commit_after>---
layout: post
title: Custom Form Controls in Angular
imageUrl: /images/banner/custom-form-controls-in-angular-2.jpg
date: 2016-07-27T00:00:00.000Z
update_date: 2016-12-18T00:00:00.000Z
summary: >-
  Angular makes it very easy to create custom form controls. Read on to learn
  how to do it!
categories:
  - angular
tags:
  - angular2
  - forms
topic: forms
demos:
  - url: 'https://embed.plnkr.co/6xVdppNQoLcsXGMf7tph/'
    title: Custom number input control
author: pascal_precht
related_posts:
  - Validators Pipeline in Angular 1.3
  - Two-way Data Binding in Angular
  - Reactive Forms in Angular
  - Template-driven Forms in Angular
  - Custom Validators in Angular
  - Testing Angular Directives with Custom Matchers
related_videos:
  - '189792758'
  - '189785428'
  - '175255006'
  - '193524896'
  - '175218351'
  - '189618526'

---


There are many things that Angular helps us out with when creating forms. We've covered several topics on [Forms in Angular](/forms-in-angular-2), like model-driven forms and template-driven forms. If you haven't read those articles yet, we highly recommend you to do so as this one is based on them. [<NAME>](http://twitter.com/kryptos_rsa), one of our training students, who later on contributed to the official documentation as part of the Docs Authoring Team for Angular, has also written a very nice [introduction](http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel) to creating custom controls.
{'fraction_non_alphanumeric': 0.08970539556438266, 'fraction_numerical': 0.06785832505792784, 'mean_word_length': 3.9379084967320264, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3430865', 'n_tokens_mistral': 1101, 'n_tokens_neox': 936, 'n_words': 344}