@angular/forms#FormControl TypeScript Examples

private getFilteredTokens(form: FormControl): Observable<ITokenDescriptor[]> {

        return combineLatest([
            this.sortedTokens$,
            form.valueChanges.pipe(
                startWith('')
            ),
        ]).pipe(
            map((x) => {
                const [tokens, filterText] = x;
                return filterTokens(tokens, filterText);
            })
        );
    }

// 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
    // });
  }

async requestAccounts(): Promise<void> {
    const amountOfAccountsLoaded = this.accounts.length;
    let response: Unsuccessful | Success<StellarAddress[]>;
    try {
      response = await this.hardwareWalletsService.getTrezorPublicKeys({
        start: amountOfAccountsLoaded,
        end: amountOfAccountsLoaded + 4,
      });
    } catch (e: any) {
      console.error(e);
      this.nzMessageService.error(`There was an error we didn't expect, try again or contact support`, {
        nzDuration: 5000
      });
      return;
    }

    if (!response.success) {
      this.nzMessageService.error(`We can't continue`, {
        nzDuration: 5000,
      });
      return;
    }

    response.payload.forEach(record => {
      this.accounts.push(new FormGroup({
        publicKey: new FormControl(record.address),
        path: new FormControl(record.serializedPath),
        active: new FormControl(true),
      }));
    });
  }

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;
  }

filterForm = new FormGroup({
    searchFilter: new FormControl(""),
    dateFilter: new FormControl(true),
    providerFilter: new FormControl([]),
    profileFilter: new FormControl([]),
    regionFilter: new FormControl([]),
    integrationFilter: new FormControl([]),
    typeFilter: new FormControl([]),
  });

ngOnInit() {
    this.componentAlive = true;
    this.searchForm = new FormGroup({
      username: new FormControl('', []),
    });
    this.searchUsers();
    this.searchForm
      .get('username')
      .valueChanges.pipe(
        takeWhile(() => !!this.componentAlive),
        debounceTime(300)
      )
      .subscribe(() => {
        this.searchUsers();
      });
  }

static createValidator(
    existingNames: Observable<string[]>,
    errorStr: string = "valueExists"
  ): AsyncValidator {
    return {
      validate: (control: FormControl) => {
        const value = control.value.toLowerCase();

        return existingNames.pipe(
          map(names => !!names.find(n => n.toLowerCase() === value)),
          map(found => found ? {[errorStr]: true} : null)
        );
      }
    };
  }

static optionalEmailIfBlank(control: FormControl): any {
    // skip validation if empty (Validators.required should handle this)
    if (!control.value) {
      return null;
    }
    let exp = new RegExp(`^${AppValidators.EMAIL_REGEX}$`);
    if (exp.test(control.value)) {
      return null;
    }
    return {isValid: true};
  }

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();
  }

uploadEmoteFile(file: File | null): void {
		if (!(file instanceof File)) return this.loggerService.debug(`Canceled emote upload`), undefined;
		const reader = new FileReader();
		const control = this.form.get('emote') as FormControl;

		if (file.size > 5000000) {
			this.emoteFormService.uploadError.next('File must be under 5.0MB');
			control.setErrors({ image_size_too_large: true });

			return undefined;
		} else {
			this.emoteFormService.uploadError.next('');
			control.setErrors({ image_size_too_large: false });
		}

		reader.onload = (e: ProgressEvent) => {
			this.emoteFormService.uploadedEmote.next(String((e.target as { result?: string; }).result));

			if (control) {
				control.patchValue(file);
				control.setErrors(null);
				control.markAsDirty();
			}

			return undefined;
		};

		reader.readAsDataURL(file);
		return undefined;
	}

public transform(control: FormControl): Observable<ReturnType> {
    return control.valueChanges.pipe(
      startWith(control.value),
      map((value: ClassKey) => {
        const code: ClassKey = (value as ClassKey)|| Background.Solid;
        console.log(code, valueToClassName[code]);
        return { [valueToClassName[code]]: true };
      })
    )
  }

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

whitespaceValidator(control: FormControl) {
    const isWhitespace = (control.value || '').trim().length === 0;
    const isValid = !isWhitespace;
    return isValid ? null : { whitespace: true };
  }

optionSearchControl = new FormControl('');

swapForm = new FormGroup({
        fromAmount: new FormControl('', this.tokenAmountInputValidator),
        toAmount: new FormControl('', [...this.tokenAmountInputValidator]),
    });

public period = new FormGroup({
    start: new FormControl(),
    stop: new FormControl(),
  });

horizonSelectControl: FormControl = new FormControl('', [Validators.required]);

public readonly brbcAmountCtrl = new FormControl(null);