搜索 Angular 表单生成器答案

【问题标题】：Search Angular Formbuilder搜索 Angular 表单生成器
【发布时间】：2021-08-22 15:48:57
【问题描述】：

我正在寻找一种在界面上以管理员身份构建表单的方法。这些应该稍后集成为要查询的“大”表单的一部分。在我自己构建东西之前，我想问一下是否有人知道扩展或类似的东西。

感谢您的帮助:)

【问题讨论】：

【解决方案1】：

你尝试一些东西很好，@Community 会帮助你，这就是它的工作原理。这是开始的基本表格；

在您的 HTML 文件中；

<form [formGroup]="formAngular" (ngSubmit)="onSubmit()">
        <label>Name</label>
        <input type="text" formControlName="admin">

        {{formAngular.controls.admin.errors | json}}

        <p 
            *ngIf="formAngular.controls.admin.errors?.required && formAngular.controls.admin.touched && formSend">
            It is required your name
        </p>

    <input type="submit" value="Send"  />

    <p  *ngIf="formSend && !formAngular.valid">Form is not complete</p>

</form>

在您的组件 TS 文件中；

  formAngular: FormGroup;

  formSend: boolean;

  constructor() {
    this.formSend = false;
    this.formAngular = new FormGroup({
      admin: new FormControl('', [
        Validators.required,
        Validators.maxLength(10)
      ])
  }

onSubmit() {
    this.formSend = true;
    console.log("Form value: ", this.formAngular.value);
  }


ngOnInit() {
    const controlAdmin = this.formAngular.controls.admin;
    controlName.valueChanges.pipe(debounceTime(500)).subscribe(value => {
      console.log("Your changes: ", value);
    });
  }

【讨论】：