TypeScript common.FormBuilder類代碼示例

 constructor(fb: FormBuilder) {
   this.form = fb.group({
    oldPassword: ['', Validators.required],
    newPassword: ['', Validators.compose([Validators.required, PasswordValidators.passwordComplexity])], 
    confirmPassword: ['', Validators.required] 
   }, { validator: PasswordValidators.unmatchingPasswords });
 }

 constructor(fb: FormBuilder) { 
     this.myFrom = fb.group({
         name: "Arsalan",
         age: 24,
         email: "a4arshi@yahoo.com"
     })
 }

    /**
     * The Add-Folder modal
     * @param {NavParams} contains data passed from the caller (under
     * navParams.data.parentItems).
     * @param {viewController} used to dismiss this modal with data to
     * return to the caller.
     * @param {FormBuilder} used to build the form of this modal.
     */
    constructor(
        private navParams: NavParams,
        private viewController: ViewController,
        private formBuilder: FormBuilder
    ) {
        // passed in a string with the parent path in it
        this.parentPath = navParams.data.parentPath;

        let hasSlash = (control: Control): ValidationResult => {
            console.log('HS validator control.value: ' + control.value);
            if (control.value !== '' && control.value.indexOf('/') !== -1) {
                return { hasSlash: true };
            }
            return null;
        };

        let alreadyExists = (control: Control): ValidationResult => {
            if (control.value === '') {
                // alert('did not expect control.value to be empty');
                return null;
            }

            if (!(this.navParams &&
                this.navParams.data &&
                this.navParams.data.parentItems &&
                Object.keys(this.navParams.data.parentItems).length)) {
                // nav params have not been sent yet or they are empty
                return null;
            }
            // for non empty control.value (which carries the string
            // that was added on the input line), check that it isn't
            // already in this.navParams.data.parentItems, but we have
            // to search it by name
            let newName: string = control.value,
                parentItems: { [id: string]: TreeNode } =
                    this.navParams.data.parentItems,
                parentKeys: string[] = Object.keys(parentItems),
                key: number;
            for (key = 0; key < parentKeys.length; key++) {
                let parentKey: string = parentKeys[key];
                if (newName === parentItems[parentKey].name) {
                    return { alreadyExists: true };
                }
            }
            return null;
        };

        this.nameControl = new Control(
            '',
            Validators.compose([
                Validators.required,
                alreadyExists,
                hasSlash
            ]));

        this.form = formBuilder.group({
            nameControl: this.nameControl
        });
    }

 constructor(private _dialogService: DialogService,
     private _empTimeSheetService: EmployeeTimeSheetService,
     private _fb: FormBuilder) {
     this._form = _fb.group({
         
     });
     this._date = new Date();
 }

 constructor(viewCtrl: ViewController, form: FormBuilder) {
   this.viewCtrl = viewCtrl;
   this.projectForm = form.group({
     name: ['', Validators.required],
     description: ['', Validators.required],
     tags: ['', Validators.required]
   });
 }

 constructor(fb: FormBuilder) {
     this.form = fb.group({
         username: ['', Validators.compose([Validators.required, 
         UsernameValidators.cannotContainSpace]),
         UsernameValidators.shouldBeUnique],
         password: ['', Validators.required]
     })
 }

 constructor(public http: Http, fb: FormBuilder){
     this.myForm = fb.group({
         'sku': ['ABC123', Validators.required],
         'sku1': ['ABC123', Validators.required]
     });
     
     this.sku = this.myForm.controls['sku'];
 } 

  buildForm(): void {
    this.newTodo = new Control('', Validators.required);

    this.myForm = this.fb.group({
      'newTodo': this.newTodo
    });
  }

  toControlGroup(questions:QuestionBase<any>[] ) {
    let group = {};

    questions.forEach(question => {
      group[question.key] = question.required ? [question.value || '', Validators.required] : [];
    });
    return this._fb.group(group);
  }

 ngOnInit() {
     this.form = this._fb.group({
         "firstName": ["", Validators.compose([Validators.required])],
         "lastName":  ["", Validators.compose([Validators.required])],
         "email":     ["", Validators.compose([Validators.required, FormValidator.emailValidator])],
         "password":  ["", Validators.compose([Validators.required, FormValidator.passwordValidator])]
     });
 }