TypeScript angular2/common ControlGroup Examples

Programming Language: TypeScript

Namespace/Package Name: angular2/common

Class/Type: ControlGroup

Examples at hotexamples.com: 30

The ControlGroup class in Angular2.common allows you to group together multiple FormControl instances into a single, cohesive unit. This is useful for creating forms with multiple fields that need to be validated together.

An example of using ControlGroup in TypeScript could be as follows:

import { Component } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/common";

@Component({
  selector: "my-form",
  template: `
  
    Name:
    
    
   
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      name: ["", Validators.required]
    });
  }

  onSubmit() {
    console.log(this.myForm.value); // { name: "John" }
  }
}

In this example, we create a simple form with a single field for the user's name. We then use the FormBuilder to create a new ControlGroup instance and attach it to the form. We also add a validator to the name field to ensure it is not empty. When the form is submitted, the onSubmit method is called and we can access the form's values using the `this.myForm.value` property. The ControlGroup class is part of the @angular/common package library.

TypeScript ControlGroup - 30 examples found. These are the top rated real world TypeScript examples of angular2/common.ControlGroup extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

find(30)

addControl(6)

setErrors(4)

updateValueAndValidity(1)

Example #1

Show file

File: passwordValidators.ts Project: code-matt/practice

  static passwordsMustMatch(group: ControlGroup){
    var newpw = group.find('newpassword');
    var confirmpw = group.find('confirmpassword');
    if (newpw.value !== confirmpw.value)
      return	{passwordsMustMatch: true};

    return null;
  }

Example #2

Show file

File: password-validators.ts Project: fox-eye/angular2-udemy-mosh

 static unmatchingPasswords(cg: ControlGroup) {
   var newPasswordValue = cg.find('newPassword').value;
   var confirmPasswordValue = cg.find('confirmPassword').value;
   if(newPasswordValue !== confirmPasswordValue) {
     return { unmatchingPasswords: true };
   }
   return null;
 }

Example #3

Show file

File: reset-password-form.component.ts Project: MahmoudHboubati/AngularJS2-Cources

 resetPassword() {
     console.log(this.form.value);
     if (this.form.find('currentPassword').value != '1234') {
         this.form.find('currentPassword').setErrors({
             invalidPassword: true
         })
     }
 }

Example #4

Show file

File: confirmValidators.ts Project: kobvel/ng2-pragmatic-guide-lessons

    static shouldMatchWith(group: ControlGroup) {
        const newPassword = group.find('newpass').value;
        const confirmPassword = group.find('confirm').value;

        if (newPassword !== confirmPassword) {
            return { shouldMatchWith: true };
        }
        return null;
    }

Example #5

Show file

File: passwordValidators.ts Project: fscbest/angular2-seed

    static shouldBeSame(group: ControlGroup){
        var newPassw = group.find('new_password');
        var confPassw = group.find('confirm_password');
        if(newPassw.value != confPassw.value ){
            return { shouldBeSame: true };
        }

        return null;
    }

Example #6

Show file

File: usernameValidators.ts Project: cristianmurillo87/cursoAngular2

 static shouldBeEqual (group: ControlGroup){
     var newpass = group.find('newpass');
     var confirmpass= group.find('confirmpass');
     
     if(newpass.value != confirmpass.value){
         return {shouldBeEqual: true}
     }
            
     return null;
 }

Example #7

Show file

File: passwordValidator.ts Project: cristianmurillo87/cursoAngular2

 static shouldBeEqual (group: ControlGroup){
     var newpass = group.find('newpass').value;
     var confirmpass= group.find('confirmpass').value;
     
     if(confirmpass.length >0 && newpass.length >0 && newpass != confirmpass){
         return {shouldBeEqual: true}
     }
            
     return null;
 }

Example #8

Show file

File: ChangePasswordValidators.ts Project: kamillacrozara/angular2-startapp

    static passwordMustMatch(group: ControlGroup) {
        var newPwd = group.find('newPwd').value;
        var confirmPwd = group.find('confirmPwd').value;

        if (newPwd != confirmPwd)
            return {passwordMustMatch: true};

        return null;

    }

Example #9

Show file

File: changepw-form.component.ts Project: ildoc/appunti

    signup() {
        if(this.form.find('currentPw').value=="1234")
            alert("password changed succesfully");
        else
            this.form.find('currentPw').setErrors({
                incorrectPw: true
            });

        console.log(this.form.value);
    }

Example #10

Show file

File: passwordValidators.ts Project: hrbcksq/angular-dua

 public static matchPassword(controlGroup: ControlGroup){ 
     var newPassword = controlGroup.find("newPassword").value;
     var confirmPassword = controlGroup.find("confirmPassword").value;                    
     if ((newPassword && confirmPassword) && (newPassword !== confirmPassword)){
         return {'match': true};
     } 
     else {
         return null;
     }
 }

Show more examples