Angular 9 表单值更改 - Javascript

在 Angular 9 中，表单是一个非常常见的特性，允许用户输入和提交数据。在某些情况下，我们需要在 Angular 9 表单中更改某些数据值。在这篇文章中，我们将学习如何使用 Javascript 更改 Angular 9 表单的值。

获取表单控件

在更改表单的值之前，我们需要首先获取表单控件。可以使用以下方式获取表单控件：

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  get name() {
    return this.form.get('name');
  }

  get email() {
    return this.form.get('email');
  }

  get password() {
    return this.form.get('password');
  }
}

在上面的代码中，我们使用 FormBuilder 创建了一个表单。然后使用 this.form.get() 获取表单控件。

更改表单值

一旦我们获取了表单控件，我们就可以更改它们的值。我们可以使用以下方式更改表单控件的值：

this.name.setValue('John');
this.email.setValue('john@example.com');
this.password.setValue('password');

在上面的代码中，我们使用 setValue() 方法更改表单控件的值。

总结

在本文中，我们学习了如何使用 Javascript 更改 Angular 9 表单的值。我们首先获取表单控件，然后使用 setValue() 方法更改表单控件的值。