# @angularclass/match-control

> Angular 2 Match Control

Latest version **2.0.0** (published 2016-06-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @angularclass/match-control
pnpm add @angularclass/match-control
yarn add @angularclass/match-control
bun add @angularclass/match-control
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2016-06-20 |
| First published | 2016-06-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Partick Stapleton |
| Maintainers | angularclass-npm, gdi2290 |

## Links

- npm: https://www.npmjs.com/package/@angularclass/match-control
- Repository: https://github.com/AngularClass/match-control
- Homepage: https://github.com/AngularClass/match-control#readme
- Issues: https://github.com/AngularClass/match-control/issues
- npm.io page: https://npm.io/package/@angularclass/match-control

## Recent versions

- 2.0.0 (latest) — 2016-06-20
- 1.0.1 — 2016-06-08
- 1.0.0 — 2016-06-08

## README

<p align="center">
  <a href="http://courses.angularclass.com/courses/angular-2-fundamentals" target="_blank">
    <img width="438" alt="Angular 2 Fundamentals" src="https://cloud.githubusercontent.com/assets/1016365/17200649/085798c6-543c-11e6-8ad0-2484f0641624.png">
  </a>
</p>

---
# AngularClass Match Control
> Angular 2 Match Control: match two controls. Useful for changing passwords where you need to have two passwords matched

1.x.x uses the old form api   
2.x.x uses the new forms api

# Install
```bash
npm install @angularclass/match-control --save
```

* Attributes
  * `ac-match-control`: The control name to match

# API
```typescript
@Component({
  selector: 'account',
  directives: [
    ...ANGULARCLASS_MATCH_CONTROL_DIRECTIVES // [ AcMatchControlValidator ]
  ]
})
export class Account {}
```
```html
<input ngControl="newPasswordAgain" ac-match-control="newPassword"> <!-- invalidMatch -->
```


# example
> combined with `@angularclass/form-errors`

```typescript
import { Component }  from '@angular/core';
import { FORM_PROVIDERS, FORM_DIRECTIVES } from '@angular/common';


import {ANGULARCLASS_FORM_ERRORS_DIRECTIVES} from '@angularclass/form-errors';
import {ANGULARCLASS_MATCH_CONTROL_DIRECTIVES} from '@angularclass/match-control';



@Component({
  selector: 'account-edit',
  providers: [
    ...FORM_PROVIDERS
  ],
  directives: [
    ...FORM_DIRECTIVES,
    ...ANGULARCLASS_FORM_ERRORS_DIRECTIVES,
    ...ANGULARCLASS_MATCH_CONTROL_DIRECTIVES
  ],
  template: `
  <div>
    <p>
      Account:
    </p>

    <form
      #accountForm="ngForm"
      (ngSubmit)="onUpdateProfile(accountForm.value, accountForm.valid)"
    >

      <div>
        <label>
          Password:
          <input ngControl="newPassword" required>
        </label>
        <ac-form-errors control="newPassword" [errors]="{'required': 'password is required'}"></ac-form-errors>

      <label>
        Password Again:
        <input ngControl="newPasswordAgain" ac-match-control="newPassword">
      </label>

      <ac-form-errors control="newPasswordAgain" [errors]="{
        'required': 'password is required',
        'invalidMatch': 'your passwords must match'
      }"></ac-form-errors>

      </div>


      <button>Submit</button>

    </form>

  </div>
  `
})
export class AccountEditComponent {
  accountForm = {
    username: ''
  };

  onUpdateProfile(json, isValid) {

  }

}
```

### todo
- [ ] todo


___

enjoy — **AngularClass**

<br><br>

[![AngularClass](https://cloud.githubusercontent.com/assets/1016365/9863770/cb0620fc-5af7-11e5-89df-d4b0b2cdfc43.png  "Angular Class")](https://angularclass.com)
##[AngularClass](https://angularclass.com)
> Learn AngularJS, Angular 2, and Modern Web Development from the best.
> Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com

---
_Source: https://npm.io/package/@angularclass/match-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._