数据绑定

约 567 字大约 2 分钟

2026-09-16

比如我们需要将一个 signal 绑定到 input 的 value 上, 我们可以使用 [value]="signal()" 来实现单向绑定。

提示

不止可以用来绑定 value, 比如你希望绑定一个 style 你也可以和 vue 一样在右侧传入一个对象来修改样式

/src/app/app.ts

import { Component, signal } from '@angular/core'

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  inputText = signal('')
  handleInput(event: InputEvent) {
    if (!(event.target instanceof HTMLInputElement)) {
      return
    }

    this.inputText.set(event.target.value)
  }
}

/src/app/app.html

<input type="text" [value]="inputText()" (input)="handleInput($event)" />
<p>Input text: {{inputText()}}</p>

简化版本

我们还可以使用 form 函数来实现双向绑定。

注意, 这个功能只有在 Angular 22 及以上版本才支持, 如果你使用的是低版本的 Angular, 你需要升级到最新版本。

/src/app/app.ts

import { Component, signal } from '@angular/core'
import { form, FormField } from '@angular/forms/signals'

interface LoginData {
  username: string
  password: string
}

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
  imports: [FormField],
})
export class App {
  loginModel = signal<LoginData>({
    username: '',
    password: '',
  })

  loginForm = form(this.loginModel)

  handleSubmit(event: SubmitEvent) {
    event.preventDefault()
    if (!(event.target instanceof HTMLFormElement))
      return
    const formData = new FormData(event.target)
  }
}

/src/app/app.html

<form (submit)="handleSubmit($event)">
  <input type="text" [formField]="loginForm.username">

  <input type="text" [formField]="loginForm.password">
</form>

在上面的代码中, 我们使用了 form 函数来创建一个表单模型, 并使用 [formField] 指令来绑定输入框的值到模型中。

我们如果需要读取表单中的数据就需要使用:

import { Component, signal } from '@angular/core'
import { form, FormField } from '@angular/forms/signals'

interface LoginData {
  username: string
  password: string
}

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
  imports: [FormField],
})
export class App {
  loginModel = signal<LoginData>({
    username: '',
    password: '',
  })

  loginForm = form(this.loginModel)

  handleSubmit(event: SubmitEvent) {
    event.preventDefault()
    // 获取到所有数据
    const formData = this.loginForm().value()
    // 单独获取用户名
    const username = this.loginForm.username().value()
  }
}

form 还可以简化你的表单过滤方式

import { Component, signal } from '@angular/core'
import { email, form, FormField, required } from '@angular/forms/signals'

interface LoginData {
  username: string
  password: string
}

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
  imports: [FormField],
})
export class App {
  loginModel = signal<LoginData>({
    username: '',
    password: '',
  })

  loginForm = form(this.loginModel, (schemaPath) => {
    // 将第二个参数传入一个函数, 这个函数会在表单提交的时候被调用, 你可以在这里对表单进行验证, 如果验证失败, 可以抛出一个错误, 这样表单就不会提交了
    required(schemaPath.username)
    email(schemaPath.username, {
      message: 'Please enter a valid email address.',
    })
  })

  handleSubmit(event: SubmitEvent) {
    event.preventDefault()
  }
}

既然过滤完了, 我们也可以获取到这个表单是否过滤成功

<p>Form is valid: {{ loginForm().valid() }}</p>