使用Angular表单构建自定义锻炼计划教程

一、引言

Angular是一个功能强大的前端框架，它提供了丰富的表单支持功能，使得构建复杂的表单应用变得简单。本文将通过一个构建自定义锻炼计划的案例，详细讲解如何使用Angular表单支持。

二、案例需求

我们的目标是构建一个允许用户创建和编辑自定义锻炼计划的应用程序。用户应该能够添加锻炼属性（如名称、标题、描述和休息时间），并为锻炼添加/移除多个练习。

三、实现步骤

1. 定义模型

首先，我们需要定义锻炼和练习的模型。这些模型将用于在Angular组件中管理数据。

// exercise.model.ts export class Exercise { id: number; name: string; title: string; description: string; steps: string; image: string; video: string; audio: string; }


            // workout.model.ts

            import { Exercise } from './exercise.model';

export class Workout { id: number; name: string; title: string; description: string; restTime: number; exercises: Exercise[]; }

2. 创建组件

接下来，我们需要创建Angular组件来管理锻炼和练习的创建和编辑。我们将使用Angular表单来收集用户输入。

// workout-builder.component.ts import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Exercise } from './exercise.model'; import { Workout } from './workout.model';


            @Component({

                selector: 'app-workout-builder',

                templateUrl: './workout-builder.component.html',

                styleUrls: ['./workout-builder.component.css']

            })

            export class WorkoutBuilderComponent {

                workoutForm: FormGroup;

                exercises: Exercise[] = [];
                constructor(private fb: FormBuilder) {

                    this.workoutForm = this.fb.group({

                        name: ['', Validators.required],

                        title: ['', Validators.required],

                        description: ['', Validators.required],

                        restTime: ['', Validators.required]

                    });

                }
                addExercise() {

                    const newExercise = new Exercise();

                    newExercise.id = this.exercises.length + 1;

                    this.exercises.push(newExercise);

                }
                removeExercise(index: number) {

                    this.exercises.splice(index, 1);

                }
                saveWorkout() {

                    const workout = new Workout();

                    workout.name = this.workoutForm.get('name')!.value;

                    workout.title = this.workoutForm.get('title')!.value;

                    workout.description = this.workoutForm.get('description')!.value;

                    workout.restTime = this.workoutForm.get('restTime')!.value;

                    workout.exercises = this.exercises;

// 在这里保存workout对象，例如发送到服务器 console.log(workout); } }

3. 创建模板

现在，我们需要创建Angular模板来呈现表单并允许用户交互。