我可以在多個Angular2表單中創建和重用ControlGroup組件

我正在編寫一個Angular 2應用程序並在會員系統上工作。我在我的註冊表單中有一個ControlGroup，它包含一個密碼和一個ConfirmPassword，以及各種登錄信息。這個ngForm還有一個電子郵件控件。我可以在多個Angular2表單中創建和重用ControlGroup組件

這裏的顯示形式的控制和FormBuilder使用的構造函數代碼。還有更多的代碼可以生成錯誤消息等等。

private _passwordValidators = new CustomValidators(); 

constructor(private _membershipService: MembershipService, 
      private _logger: Logger, 
      private _fb: FormBuilder) { 

    this.emailCtrl = new Control('', Validators.compose([ 
      Validators.required, 
      this._passwordValidators.validEmailLoose 
     ])); 

    this.passwordCtrl = new Control('', Validators.compose([ 
      Validators.required, 
      Validators.minLength(this.minPasswordLength), 
      this._passwordValidators.needsCapitalLetter, 
      this._passwordValidators.needsLowerLetter, 
      this._passwordValidators.needsNumber, 
      this._passwordValidators.needsSpecialCharacter 
     ])); 

    this.confirmPasswordCtrl = new Control('', Validators.compose([ 
      Validators.required 
     ])); 

    this.registerForm = _fb.group({ 
     'email': this.emailCtrl, 
     'matchingPassword': _fb.group({ 
      'password': this.passwordCtrl, 
      'confirmPassword': this.confirmPasswordCtrl 
     }, {validator: this._passwordValidators.areEqual}) 

    }); 

    this.registerViewModel = new RegisterViewModel("", "", ""); 
}

我有一個只包含密碼和ConfirmPassword控件的ResetPassword窗體。然後我還有一個AccountSettings頁面，其中可以更改您的密碼，並將這兩個字段作爲ControlGroup以及許多其他字段，即名和姓，電話號碼等。這兩個領域在所有三個地方基本相同，並且在深度驗證方面有些明顯。他們的密碼必須包含下限，上限，特殊和數字等，並且ConfirmPassword必須匹配。我有這一切工作，但我已經在所有三個地方重複了代碼;一個非常溼的方法。

我想我想要做的就是創建一個組件出這個嵌套ControlGroup的和使用，在FromBuilder它添加到一個更大的ControlGroup。所以我的問題是......爲了保持一切乾爽，有沒有辦法創建一個Component/ControlGroup，它只包含這兩個獨立的控件，然後將該Component/ControlGroup作爲一個更大的窗體的ControlGroup的一部分包含進來在所有三個位置使用它，而不是重複三次邏輯。

來源

2016-03-01 Coaden

您可以設置個人在一個文件（或一個文件每次），然後將它們導入，你需要和使用ControlGroup的addControl()方法，像這樣控制：

// controls.ts 

    export var emailCtrl = new Control('', Validators.compose([ 
      Validators.required, 
      this._passwordValidators.validEmailLoose 
     ])); 

    export var passwordCtrl = new Control('', Validators.compose([ 
      Validators.required, 
      Validators.minLength(this.minPasswordLength), 
      this._passwordValidators.needsCapitalLetter, 
      this._passwordValidators.needsLowerLetter, 
      this._passwordValidators.needsNumber, 
      this._passwordValidators.needsSpecialCharacter 
     ])); 

    export var confirmPasswordCtrl = new Control('', Validators.compose([ 
      Validators.required 
     ])); 

// form.ts 
import {emailCtrl} from 'controls.ts' 


this.registerForm = _fb.group({ 
    'someOtherControl: [], 
}); 
this.registerForm.addControl("email", emailCtrl) 
....

來源

2016-03-01 17:29:18 Sasxa

我可以在多個Angular2表單中創建和重用ControlGroup組件

回答

相關問題