Angular Reactive Forms：如何预加载带有信息的表单输入

Question

我正在尝试在我的网站内创建一个论坛。在努力使用模板驱动表单来实现之后，我决定切换到响应式表单。我一直在整个网站上的两种方法之间切换，并意识到反应式表单有一个缺点，这导致我选择模板驱动的表单，并且我怀疑有一种值得解决的解决方法。我遇到的问题是，当用户想要编辑他们已经创建的内容时，我使用与创建时相同的表单，但将文档 ID 附加到路径中，如下所示：

localhost:4200/create-thread/some-thread-uid

当遵循此路线时，它会加载创建线程组件，但将已提供的数据预加载到适当的表单控件中。这是通过使用双向绑定将线程对象附加到相关表单的 ngModel 来完成的。像这样：

<!-- <form #finished="ngForm" (ngSubmit)="save(finished.value)">

<div class="form-group">
    <label for="author">Author of thread:</label>
        <input
            #author="ngModel"
            [(ngModel)]="thread.author"
            name="author"
            id="author"
            class="form-control"
            required
            type="text">                
    </div>
</form>

我的问题是，有没有办法使用反应式表单来完成此任务（将云数据库中存储的对象中已提供的信息加载到输入字段中进行编辑）？我尝试了几种方法但无法弄清楚，包括将“thread.author”注入到表单生成器中的适当字段。任何帮助表示赞赏。

Answer 1

有两种方法可以实现您所说的操作，一种方法是在创建表单时填充字段，另一种方法是在创建表单后添加值。前者似乎适合您在这里要做的事情，而后者则适合根据计算值或服务调用的合并构建表单。

在对反应式表单执行任何操作之前，请确保已将其导入ReactiveFormsModule模块中，如下所示：

  imports: [
    ReactiveFormsModule
  ]

第一种方式 创建包含值的表单（即“编辑”）

首先，在 component.ts 中创建表单，如下所示：

export class YourEditComponent implements OnInit {

  // First you'll specify your form variable
  form: FormGroup;

  // In your constructor, be sure to inject FormBuilder
  constructor (private formBuilder: FormBuilder) {}

  // I like to create the form in OnInit, but for testing
  // purposes I prefer to call a function that creates the form,
  // rather than doing the logic in this function
  ngOnInit(): void {
    this.createEditFormGroup();
  }

  // Here's where you create your form. I assume you'll
  // be getting your form data object from a service, but
  // for the sake of demonstration I'll create the object here
  createEditFormGroup(): void {
    // Here you'll have the object already, so don't do this
    const thread = {
      author: 'breadman0',
      email: 'breadman0@gmail.com'
    }

    // Now simply create the form, passing this object (in this
    // case, the object "thread")
    this.form = this.formBuilder.group(thread);
  }

  // Now when you save, you don't need to pass in the value, you
  // can just access the form's value
  save(): void {
    console.log(this.form.value);
  }

}

在您的 component.html 中，您只需要添加一些指令并处理“提交”事件。请参阅下面的 html，修改后即可工作：

<form [formGroup]="form" (ngSubmit)="save()">
    <div class="form-group">
        <label for="author">Author of thread:</label>
        <input
            formControlName="author"
            class="form-control"
            required
            type="text">                
    </div>
    <div class="form-group">
        <label for="email">Author's email:</label>
        <input
            formControlName="email"
            class="form-control"
            required
            type="text">                
    </div>
</form>

请注意，“必需”实际上并不是很有帮助，因为可以在开发工具中对其进行修改。您最好按照表单中的要求设置字段。

第二种方法 用值填充现有表单

这种方式非常相似，除了我们只是使用我们正在使用的任何对象的新实例创建表单

this.form = this.formBuilder.group({
  author: '',
  email: ''
});

//or

this.form = this.formBuilder.group(new Thread());

然后我们调用 patchValue：

// This can be done for any field in the form. I choose "author" here
this.form.patchValue({author: 'anonymous'});