面试题：Angular响应式表单中表单组与表单控件的基础使用

在Angular响应式表单中，可以通过FormGroup和FormControl来创建包含多个表单控件的表单组，并设置初始值和验证器。以下是具体步骤和代码示例：

引入必要的模块：在app.module.ts中引入ReactiveFormsModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

在组件中创建表单组：在组件的ts文件中，导入FormGroup和FormControl，并创建表单组。

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

@Component({
  selector: 'app - root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      username: new FormControl('defaultUsername', [Validators.required]),
      email: new FormControl('defaultEmail@example.com', [Validators.required, Validators.email]),
      age: new FormControl(18, [Validators.required, Validators.min(18)])
    });
  }
}

在上述代码中：

myForm是一个FormGroup实例。
username、email和age是FormControl实例，作为myForm的子控件。
defaultUsername、defaultEmail@example.com和18分别是username、email和age的初始值。
Validators.required、Validators.email和Validators.min(18)分别是为控件设置的验证器。

在模板中使用表单：在app.component.html中使用formGroup指令来绑定表单。

<form [formGroup]="myForm">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" formControlName="username">
    <div *ngIf="myForm.get('username')?.hasError('required') && (myForm.get('username')?.touched || myForm.get('username')?.dirty)">
      Username is required.
    </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="myForm.get('email')?.hasError('required') && (myForm.get('email')?.touched || myForm.get('email')?.dirty)">
      Email is required.
    </div>
    <div *ngIf="myForm.get('email')?.hasError('email') && (myForm.get('email')?.touched || myForm.get('email')?.dirty)">
      Please enter a valid email.
    </div>
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="number" id="age" formControlName="age">
    <div *ngIf="myForm.get('age')?.hasError('required') && (myForm.get('age')?.touched || myForm.get('age')?.dirty)">
      Age is required.
    </div>
    <div *ngIf="myForm.get('age')?.hasError('min') && (myForm.get('age')?.touched || myForm.get('age')?.dirty)">
      Age must be at least 18.
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

在上述模板中：

formGroup指令绑定到组件中的myForm。
formControlName指令将每个输入框与对应的FormControl关联。
使用ngIf指令根据控件的验证状态显示错误信息。

星途面试题库

面试题：Angular响应式表单中表单组与表单控件的基础使用

知识考点

面试题答案