How to use the @angular/forms.Validators.compose function in @angular/forms

To help you get started, we’ve selected a few @angular/forms examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chrisleekr / yii2-angular-boilerplate / backend / src / app / staff / staff-form.component.ts View on Github external
private router: Router,
                private activatedRoute: ActivatedRoute,
                private formBuilder: FormBuilder) {

        // Construct form group
        this.form = formBuilder.group({
            username: ['', Validators.compose([
                Validators.required,
                CustomValidators.rangeLength([3, 15]),
                Validators.pattern('^[A-Za-z0-9_-]{3,15}$'),
            ])],
            email: ['', Validators.compose([
                Validators.required,
                CustomValidators.email,
            ])],
            password: ['', Validators.compose([
                Validators.minLength(6)
            ])],
            confirmed_at: ['', Validators.compose([])],
            blocked_at: ['', Validators.compose([])],
            role: ['', Validators.compose([
                Validators.required,
            ])],
            // permissions: ['', Validators.compose([])],
            permissions: formBuilder.array([]),
            status: ['', Validators.compose([
                Validators.required,
            ])],
        }, {
            validator: validateDateTime(['confirmed_at', 'blocked_at'])
        });
github mprove-io / mprove / src / app / components / chart-controls-input / chart-control-group-padding / chart-control-group-padding.component.ts View on Github external
buildGroupPaddingForm() {
    this.groupPaddingForm = this.fb.group({
      groupPadding: [
        this.chart.group_padding,
        Validators.compose([
          Validators.required,
          services.ValidationService.integerValidator,
          Validators.min(0)
        ])
      ]
    });

    this.groupPadding = this.groupPaddingForm.controls['groupPadding'];

    this.groupPaddingChange.emit({
      groupPaddingValid: this.groupPaddingForm.valid
    });
  }
github mprove-io / mprove / src / app / components / chart-controls-input / chart-control-y-axis-label / chart-control-y-axis-label.component.ts View on Github external
buildYAxisLabelForm() {
    this.yAxisLabelForm = this.fb.group({
      yAxisLabel: [
        this.chart.y_axis_label,
        Validators.compose([Validators.required, Validators.maxLength(255)])
      ]
    });

    this.yAxisLabel = this.yAxisLabelForm.controls['yAxisLabel'];

    this.yAxisLabelChange.emit({
      yAxisLabelValid: this.yAxisLabelForm.valid
    });
  }
github PacktPublishing / Hands-On-Design-Patterns-with-C-and-.NET-Core / Chapter10 / FlixOneMVVM / Angular7 / FlixOne / src / app / product / create / create.component.ts View on Github external
constructor(private productService: ProductserviceService, private router: Router, private formBuilder: FormBuilder) {
    this.productForm = this.formBuilder.group({
      name: ['', Validators.required],
      desc: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(1000)])],
      price: ['', Validators.compose([Validators.required])],
    });
  }
  ngOnInit() {}
github Promact / md2 / src / lib / datepicker / datepicker.ts View on Github external
/** The form control validator for the max date. */
  private _maxValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
    return (!this.max || !control.value ||
      this._util.compareDate(this.max, control.value) >= 0) ?
      null : { 'md2DatepickerMax': { 'max': this.max, 'actual': control.value } };
  }

  /** The form control validator for the date filter. */
  private _filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
    return !this._dateFilter || !control.value || this._dateFilter(control.value) ?
      null : { 'md2DatepickerFilter': true };
  }

  /** The combined form control validator for this input. */
  private _validator: ValidatorFn =
  Validators.compose([this._minValidator, this._maxValidator, this._filterValidator]);

  constructor(private _element: ElementRef,
    private _overlay: Overlay,
    private _ngZone: NgZone,
    private _viewContainerRef: ViewContainerRef,
    private _locale: DateLocale,
    private _util: DateUtil,
    @Optional() private _dir: Dir) {
    this.id = (this.id) ? this.id : `md2-datepicker-${datepickerUid++}`;
  }

  ngOnDestroy() {
    this.close();
    if (this._popupRef) {
      this._popupRef.dispose();
    }
github communitybridge / easycla / cla-frontend-contributor-console / src / ionic / modals / cla-send-cla-manager-email-modal / cla-send-cla-manager-email-modal.ts View on Github external
constructor(
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public alertCtrl: AlertController,
    private formBuilder: FormBuilder,
    private claService: ClaService
  ) {
    this.getDefaults();
    this.projectId = navParams.get('projectId');
    this.userId = navParams.get('userId');
    this.companyId = navParams.get('companyId');
    this.authenticated = navParams.get('authenticated');
    this.form = formBuilder.group({
      email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
      user_name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
      message: ['']
    });
  }
github mprove-io / mprove / client / src / app / components / model / data / data.component.ts View on Github external
buildLimitForm() {
    this.limitForm = this.fb.group({
      limit: [
        this.mconfigLimit || 500,
        Validators.compose([
          Validators.required,
          services.ValidationService.integerValidator,
          Validators.min(1),
          Validators.max(500)
        ])
      ]
    });
  }
github UXAspects / UXAspects / docs / app / pages / components / sections / input-controls / number-picker / snippets / app.ts View on Github external
constructor(formBuilder: FormBuilder) {

        this.form = formBuilder.group({
            integer: [0, Validators.compose([Validators.required, Validators.min(-10), Validators.max(10)])],
            decimal: [0, Validators.compose([Validators.required, Validators.min(0), Validators.max(10)])]
        });
    }
}
github apache / incubator-dlab / services / self-service / src / main / resources / webapp / src / app / resources / computational / computational-resource-create-dialog / computational-resource-create-dialog.component.ts View on Github external
private initFormModel(): void {
    this.resourceForm = this._fb.group({
      template_name: ['', [Validators.required]],
      version: [''],
      shape_master: ['', Validators.required],
      shape_slave: [''],
      cluster_alias_name: ['', [Validators.required, Validators.pattern(PATTERNS.namePattern),
      this.providerMaxLength, this.checkDuplication.bind(this)]],
      instance_number: ['', [Validators.required, Validators.pattern(PATTERNS.nodeCountPattern), this.validInstanceNumberRange.bind(this)]],
      preemptible_instance_number: [0, Validators.compose([Validators.pattern(PATTERNS.integerRegex), this.validPreemptibleRange.bind(this)])],
      instance_price: [0, [this.validInstanceSpotRange.bind(this)]],
      configuration_parameters: ['', [this.validConfiguration.bind(this)]],
      custom_tag: [this.notebook_instance.tags.custom_tag]
    });
  }
github apache / incubator-dlab / services / self-service / src / main / resources / webapp / src / app / resources / manage-ungit / manage-ungit.component.ts View on Github external
private initFormModel(): void {
    this.updateAccountCredentialsForm = this._fb.group({
      'hostname': ['', Validators.compose([Validators.required, Validators.pattern(this.hostname_validity_pattern), this.containsHostname.bind(this)])],
      'username': ['', Validators.compose([Validators.required, Validators.pattern(this.acceptance_pattern)])],
      'email': ['', Validators.compose([Validators.required, Validators.pattern(this.mail_validity_pattern)])],
      'login': ['', Validators.compose([Validators.required, Validators.pattern(this.login_acceptance_pattern)])],
      'password': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
      'confirmPassword': ['', Validators.compose([Validators.required, this.validConfirmField.bind(this)])]
    });
  }