bixi/packages/core/form/demo/simple.md

企业级中后台前端解决方案

---
title:
  zh-CN: 基本使用
  en-US: Basic Usage
order: 0
---

## zh-CN

基本使用

## en-US

Basic

```ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'bixi-time-demo',
  template: `
  <div style="padding: 20px; width: 80%">
    <form nz-form [formGroup]="form">
      <bixi-form-item required label="Username">
        <input nz-input formControlName="username">
      </bixi-form-item>
      <bixi-form-item required label="Password">
        <input nz-input type="password" formControlName="password">
      </bixi-form-item>
      <bixi-form-item>
        <button nz-button nzType="primary" (click)="onSubmit()">Submit</button>
      </bixi-form-item>
    </form>
  </div>
  `
})
export class BixiTimeComponent {
  form: FormGroup;
  constructor(
    private fb: FormBuilder
  ) {
    this.form = this.fb.group({
      username: [null, [Validators.required]],
      password: [null, [Validators.required]]
    });
  }

  onSubmit() {
    // tslint:disable-next-line: forin
    for (const i in this.form.controls) {
      this.form.controls[i].markAsDirty();
      this.form.controls[i].updateValueAndValidity();
    }
    console.warn('onSubmit', this.form.value);
  }
}
```