Angular是一种流行的前端开发框架,它提供了一种简单而强大的方式来构建Web应用程序。在Angular中,formArray是一种表单控件,用于处理动态生成的表单字段。您可以使用formArray来获取选择的选项的开始时间和结束时间值。
首先,您需要在Angular应用程序中创建一个formArray。您可以使用Reactive Forms模块来实现这一点。在组件的初始化方法中,您可以使用FormBuilder来创建一个formArray,并为其添加所需的表单控件。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
timeRange: this.formBuilder.array([])
});
}
get timeRange(): FormArray {
return this.form.get('timeRange') as FormArray;
}
addTimeRange() {
this.timeRange.push(this.formBuilder.group({
startTime: '',
endTime: ''
}));
}
removeTimeRange(index: number) {
this.timeRange.removeAt(index);
}
}
在上面的代码中,我们创建了一个名为timeRange的formArray,并定义了两个表单控件startTime和endTime。我们还添加了两个方法addTimeRange和removeTimeRange,用于动态添加和删除timeRange中的表单控件。
接下来,在模板文件中,您可以使用ngFor指令来循环遍历timeRange,并为每个表单控件创建相应的输入框。
<form [formGroup]="form">
<div formArrayName="timeRange">
<div *ngFor="let time of timeRange.controls; let i = index" [formGroupName]="i">
<label>Start Time:</label>
<input type="text" formControlName="startTime">
<label>End Time:</label>
<input type="text" formControlName="endTime">
<button (click)="removeTimeRange(i)">Remove</button>
</div>
</div>
<button (click)="addTimeRange()">Add Time Range</button>
</form>
在上面的代码中,我们使用formArrayName指令将formArray绑定到模板中的timeRange。然后,我们使用ngFor指令循环遍历timeRange.controls,并为每个表单控件创建输入框。我们还添加了一个按钮,用于添加新的时间范围。
现在,当用户选择选项并输入开始时间和结束时间时,您可以通过访问formArray的值来获取这些值。您可以在组件中添加一个方法来处理这些值。
submitForm() {
const timeRanges = this.timeRange.value;
console.log(timeRanges);
}
在上面的代码中,我们使用timeRange.value来获取formArray的值,并将其打印到控制台上。
这是使用formArray Angular 8从选择的选项中获取开始时间和结束时间值的完整示例。请注意,这只是一个示例,您可以根据您的需求进行修改和扩展。
关于Angular和formArray的更多信息,您可以参考以下链接:
领取专属 10元无门槛券
手把手带您无忧上云