@angular/forms#FormGroup 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
    // });
  }

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

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

constructor(host: ElementRef<HTMLElement>,
              formBuilder: FormBuilder,
              public routerOutlet: SciRouterOutletElement,
              private _overlay: OverlayRef) {
    this.form = new FormGroup({
      [NAME]: formBuilder.control('', Validators.required),
      [VALUE]: formBuilder.control(''),
    }, {updateOn: 'change'});

    this._overlay.backdropClick()
      .pipe(takeUntil(this._destroy$))
      .subscribe(() => {
        this._overlay.dispose();
      });
  }

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
      ])
    })
  }

formGroup = new FormGroup({});

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

public form?: FormGroup;

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

async getAccounts(): Promise<void> {
    this.loading$.next(true);
    const newAccounts = [];
    let firstAccount: string | null = null;

    try {
      let index = this.accounts.controls.length;
      const lastIndex = index + 4;

      while (index < lastIndex) {
        const path = `44'/148'/${index}'`;
        const key = await this.hardwareWalletsService.getLedgerPublicKey(path, this.transport);

        if (!firstAccount) {
          firstAccount = key;
        }

        this.accounts.push(new FormGroup({
          publicKey: new FormControl(key),
          path: new FormControl(path),
          active: new FormControl(true),
        }));

        newAccounts.push({ key, path, active: false });
        index++;
      }

      if (newAccounts.every(account => account.key === firstAccount)) {
        this.nzMessageService.error(`We can't get the accounts from your wallet, please make sure your wallet is unlocked and with the Stellar App opened`, {
          nzDuration: 5000,
        });
        await this.onClose();
        return;
      }

      this.loading$.next(false);
    } catch (e: any) {
      console.log(e);
      this.loading$.next(false);
    }
  }

validateForm!: FormGroup;

public loginForm: FormGroup;

testForm = new FormGroup({
    testCtrl: new FormControl(""),
  });

blogForm:FormGroup;

form: FormGroup;

editForm: FormGroup;

productForm: FormGroup;

form = new FormGroup({});

langForm = new FormGroup({
    lang: new FormControl()
  });

columnForm = new FormGroup({
    role: new FormControl(),
    provider: new FormControl(),
    namedProfile: new FormControl(),
    region: new FormControl(),
  });

form = new FormGroup({});