@angular/forms#Validators TypeScript Examples

// upload form management
  auditUploadForm = new FormGroup({
    project: new FormControl('', [
      Validators.required,
      this.whitespaceValidator,
    ]),
    branch: new FormControl('', [
      Validators.required,
      this.whitespaceValidator,
    ]),
    buildToken: new FormControl('', [
      Validators.required,
      this.whitespaceValidator,
    ]),
  });

generateForm(): void {
    this.form = new FormGroup({
      code: new FormControl('', [Validators.required, containsValidator('/')]),
    });

    // this.form.valueChanges.subscribe((value) => {
    //   // Do something here
    // });
  }

ngOnInit(): void {
    const generateAccountStorageSnapshot = this.generateAccountQuery.getValue();
    const accountsStoreSnapshot = this.walletsQuery.getValue();

    // DO NOT USE THIS IN CASE YOU REALLY KNOW WHAT YOU ARE DOING
    const testPassword = 'thisisatestpasswordandyoushouldnotuseit';

    if (generateAccountStorageSnapshot.password !== testPassword) {
      if (generateAccountStorageSnapshot.pathType === 'new_wallet' && generateAccountStorageSnapshot.mnemonicPhrase) {
        this.form.controls
          .confirmPhrase.setValidators([Validators.required, sameValueValidator(generateAccountStorageSnapshot.mnemonicPhrase)]);
      }

      if (!accountsStoreSnapshot.globalPasswordHash && generateAccountStorageSnapshot.password) {
        this.form.controls
          .confirmPassword.setValidators([Validators.required, sameValueValidator(generateAccountStorageSnapshot.password)]);
      }
    } else {
      this.mnemonicPhraseService.getTestAccount().forEach(word => {
        this.phraseArray.push(new FormControl(word, Validators.required));
      });
      this.form.controls.confirmPassword.patchValue(testPassword);
    }
  }

constructor(
    private readonly blockchainAdapterService: PublicBlockchainAdapterService,
    private readonly storeService: StoreService,
    private readonly targetNetworkAddressService: TargetNetworkAddressService,
    private readonly destroy$: TuiDestroyService
  ) {
    this.address = new FormControl<string>(null, [Validators.required]);
    this.address.markAsDirty();
  }

constructor(private service: DatasourceService,
              private messageService: NzMessageService,
              private translateService: TranslateService,
              private nzModalService: NzModalService,
              private datasourceJob: DatasourceJob,
              private formBuilder: FormBuilder) {
    super();
    this.validateForm = this.formBuilder.group({
      alias: [null, [Validators.required]],
      protocol: [null, [Validators.required]],
      host: [null, [Validators.required]],
      port: [null, [Validators.required]],
      username: [null, []],
      password: [null, []],
      maxTotal: [null, []],
      sshHost: [null, []],
      sshPort: [null, []],
      sshUsername: [null, []],
      sshPassword: [null, []]
    });
    this.sourceTypes = new SourceTypeConfig().getConfig();
    this.handlerGetAll();
    this.handlerResetButton();
  }

constructor(
    public authService: ExternalAuthService, private authentication: AuthenticationService,
    private userService: UserService, private router: Router, fb: FormBuilder
  ) {
    this.loginForm = fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });
  }

reactiveForm(){
      this.blogForm=this.fb.group({
        header:['', Validators.required],
        subheader:['', Validators.required],
        author:['', Validators.required],
        image:[''],
        body:['', Validators.required],
        tags:[[]]
      })
    }

ngOnInit(): void {
    const validators = [
      Validators.required,
      Validators.pattern(/^(?:\d{6}|\d\d-\d\d-\d\d|\d\d\s\d\d\s\d\d)$/),
    ];

    if (this.ngControl.control.validator) {
      validators.push(this.ngControl.control.validator);
    }

    this.ngControl.control.setValidators(validators);
  }

createEditForm() {
    this.editForm = this.fb.group({
      id: ['', Validators.required],
      login: ['', [Validators.required, Validators.minLength(6)]],
      avatar_url: ''
    });

    this.idControl = this.editForm.get('id') as FormControl;
    this.loginControl = this.editForm.get('login') as FormControl;
    this.avatarControl = this.editForm.get('avatar_url') as FormControl;
  }

constructor(dataClient: DataClient, formatter: FormattingHelpers, route: ActivatedRoute, private formBuilder: FormBuilder, private router: Router) {

    this.formatter = formatter;
    this.data = dataClient;
    this.id = route.snapshot.paramMap.get("productId");

    this.isCreateNewMode = this.id == "$new";

    this.productForm = this.formBuilder.group({
      name: ['', Validators.required],
      description: ['', Validators.required],
      category: ['', Validators.required],
      price: ['', Validators.required],
      stockUnits: ['', Validators.required],
      thumbnailImage: ['', Validators.required]
    });

    this.hasLoaded = true;
  }

public form = new FormGroup({
    idpArn: new FormControl("", [Validators.required]),
    accountNumber: new FormControl("", [Validators.required, Validators.maxLength(12), Validators.minLength(12)]),
    subscriptionId: new FormControl("", [Validators.required]),
    tenantId: new FormControl("", [Validators.required]),
    name: new FormControl("", [Validators.required]),
    role: new FormControl("", [Validators.required]),
    roleArn: new FormControl("", [Validators.required]),
    roleSessionName: new FormControl("", [Validators.pattern("[a-zA-Z\\d\\-\\_\\@\\=\\,\\.]+")]),
    federatedOrIamRoleChained: new FormControl("", [Validators.required]),
    federatedRole: new FormControl("", [Validators.required]),
    federationUrl: new FormControl("", [Validators.required, Validators.pattern("https?://.+")]),
    secretKey: new FormControl("", [Validators.required]),
    accessKey: new FormControl("", [Validators.required]),
    awsRegion: new FormControl(""),
    mfaDevice: new FormControl(""),
    awsProfile: new FormControl("", [Validators.required]),
    azureLocation: new FormControl("", [Validators.required]),
    assumerSession: new FormControl("", [Validators.required]),
    selectAccessStrategy: new FormControl(SessionType.awsIamRoleFederated, [Validators.required]),
  });

form = this._fb.group ({
    name: ["",
      [ Validators.required ],
      [
        AsyncUniqeName.createValidator(
          this.grocyService.locations().pipe(map(all => all.map(p => p.name)))
        )
      ]
    ],
    description: [""],
    isFreezer: [false]
  });

private buildForm() {

    this.form = this.formBuilder.group({
      password: ['', Validators.compose([Validators.minLength(8), AppValidators.isValidPassword, Validators.maxLength(30), Validators.required])],
      confirm_password: ['', Validators.compose([Validators.minLength(8), AppValidators.isValidPassword, Validators.maxLength(30), Validators.required])],
      username: ['']
    });

  }

constructor(host: ElementRef<HTMLElement>,
              formBuilder: FormBuilder,
              private _activatedRoute: ActivatedRoute,
              private _overlay: Overlay,
              private _injector: Injector) {
    this.form = formBuilder.group({
      [URL]: new FormControl('', Validators.required),
    });
    this.appEntryPoints = this.readAppEntryPoints();
  }

form = new FormGroup({
		name: new FormControl('', [
			Validators.pattern(Constants.Emotes.NAME_REGEXP)
		]),
		tags: new FormControl([]),
		is_private: new FormControl(false),
		is_zerowidth: new FormControl(false),
		emote: new FormControl('')
	});

ngOnInit(): void {
    this.loginForm = new FormGroup({
      login: new FormControl('', [
        Validators.required
      ]),
      password: new FormControl('', [
        Validators.required
      ])
    })
  }

async checkTitle(value: String) {
        const control = new FormControl(value, Validators.required);
        if (control.errors === null)
            return (true);
        else {
            let errorType = this.componentName + "_VALIDATION_TITLE";
            this.errorHandlerService.addError(errorType, "Title field is required")
            return (false);
        }
    }

createAccountFrom() {
    this.accountForm = this.formBuilder.group({
      firstName: [this.userDetail?.firstName, Validators.required],
      lastName: [this.userDetail?.lastName, Validators.required],
      companyName: [this.userDetail?.companyName, Validators.required],
      nationalIdentity: [''],
      currentPassword: ['', Validators.required],
      newPassword: [''],
    });
  }

ngOnInit(): void {
    const emailValidators = [
      Validators.pattern(EMAIL_PATTERN),
    ];
    this.isEmailRequired && emailValidators.push(Validators.required);

    const passwordValidators = [
      Validators.minLength(this.minLength),
      Validators.maxLength(this.maxLength),
    ];
    this.isPasswordRequired && passwordValidators.push(Validators.required);

    this.loginForm = this.fb.group({
      email: this.fb.control('', [...emailValidators]),
      password: this.fb.control('', [...passwordValidators]),
      rememberMe: this.fb.control(false),
    });
  }

constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<CourseDialogComponent>,
        @Inject(MAT_DIALOG_DATA) course:Course,
        private coursesStore: CoursesStore,
        private messagesService: MessagesService) {

        this.course = course;

        this.form = fb.group({
            description: [course.description, Validators.required],
            category: [course.category, Validators.required],
            releasedAt: [moment(), Validators.required],
            longDescription: [course.longDescription,Validators.required]
        });

    }

constructor(private formBuilder: FormBuilder,
                public dialogRef: MatDialogRef<AswAutocompleteDialog>,
                @Inject(MAT_DIALOG_DATA) public control: AutoCompleteControl) {
        this.aswEditAutocompleteForm = this.formBuilder.group({
            tooltip: ['', [Validators.required]],
            label: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(25)]],
            name: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(25)]],
            style: ['', [Validators.required]],
            column: [],
            options: this.formBuilder.array([this.createOption()]),
            isRequired: [false]
        });
    }

ngOnInit() {
    this.form = new FormGroup({
      phoneNumber: new FormControl({
        value: /* null */this.formValue.phoneNumber,
        disabled: this.disableTest
      }, [
        Validators.required,
        IonIntlTelInputValidators.phone
      ])
    });
  }