我想知道处理带有多个角度选项卡的表单的有效方法。
例如，我有一个带有 mat-group 的表单和三个选项卡，例如营业时间/不在办公室和假期。
我有三个字段出现在所有这三个选项卡中，例如标题、日历和颜色。
除此之外，日历/颜色存在于单独的 div 中。
这是表单 html 文件的一部分，其中包含一些 formControlName。
注意：以下带有三个 mat-tabs 的 html 表单工作正常，我添加仅供参考。
<ng-template #eventFormVariable>
<div class="dialog-container event-header">
<div class="mat-card-header">
<mat-icon (click)="onClose()">close</mat-icon>
<h4 class="content-span full-width">{{formHeading}}</h4>
</div>
<div class="dialog-content event-dialog">
<form class="form-horizontal form-bordered" [formGroup]="eventForm">
<mat-tab-group animationDuration="0ms" (selectedTabChange)="onTabChanged($event);" [(selectedIndex)]="activeTabIndex">
<!--START OF THE =>>>>>>>>>>>>>>>>>>>>>>>>>>Business Hours MAT TAB <<<<<<<<<<<<<<<<<<<<<<<<<<<<<= -->
<mat-tab label="Business Hours">
<div class="col-md-12 p-0">
<div class="title-section event-fields">
<mat-form-field [color]="underLineColor">
<input matInput formControlName="title">
</mat-form-field>
</div>
<div class="shift-section event-fields">
<mat-icon class="time-icon">access_time</mat-icon>
<div class="datepicker-section">
<mat-label>Start Date</mat-label>
<mat-form-field [color]="underLineColor">
<input formControlName="datePicker" matInput [matDatepicker]="picker" [min]="yesterday" (click)="picker.open()">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<!-- Start of the SHIFTSSSSSSSSSSSSSSSSSSSSS section in the event variable form group -->
<div formArrayName="shifts" class="shift-main">
<div *ngFor="let shift of shifts.controls; let i = index" [formGroupName]="i" class="shift-info">
<mat-label>Shifts</mat-label>
<mat-form-field class="shift-title" [color]="underLineColor">
<input matInput type="text" class="shift-value" formControlName="shift">
</mat-form-field>
<mat-form-field [color]="underLineColor">
<span class="time-select-value time-from">
<mat-select formControlName="selectedTimeFrom">
<mat-option *ngFor="let timeFrom of selectTime" [value]="timeFrom.value">
{{timeFrom.viewValue}}
</mat-option>
</mat-select>
</span>
</mat-form-field>
<mat-form-field [color]="underLineColor">
<span class="time-select-value">
<mat-select formControlName="selectedTimeTo">
<mat-option *ngFor="let timeTo of selectTime" [value]="timeTo.value">
{{timeTo.viewValue}}
</mat-option>
</mat-select>
</span>
</mat-form-field>
<button class="remove-btn" mat-icon-button (click)="removeShift(i)">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<button mat-raised-button class="shift-btn" (click)="addShift()">Add Shift</button>
</div>
<!-- Recurrence Event Section in the Business Hours. -->
<div class="recurrence-section event-fields" [ngClass]="{ 'repeat-custom-option': repeatOption === 'custom' }">
<mat-icon>replay</mat-icon>
<mat-label>Repeat</mat-label>
<mat-form-field appearance="fill">
<mat-select #selectRepeat (selectionChange)="recurrence($event, customRecurrence)"
formControlName="recurrenceCriteria" [(ngModel)]="repeatOption">
<mat-option *ngFor="let option of recurrenceOptionsForBusiness" [value]="option">
{{ option | titlecase }}
</mat-option>
</mat-select>
</mat-form-field>
<span class="repeat-custom-value" *ngIf="repeatOption === 'custom'" (click)="selectRepeat.open()">
{{ repeatType === 'week' ? 'Weekly on' : repeatType }}
<span class="week-values" *ngIf="repeatType === 'week'">
<span *ngFor="let day of weekDays"> {{ day }} </span>
</span>
</span>
</div>
<div class="end-date-section event-fields {{eventForm.controls['endDateCriteria'].value === 'custom' ? 'repeat-custom-option':''}}" *ngIf="repeatOption !== 'does not repeat'">
<mat-icon>check_circle_outline</mat-icon>
<mat-label>Expiry Date</mat-label>
<mat-form-field appearance="fill">
<mat-select #selectEndDate formControlName="endDateCriteria" [(value)]="selected">
<mat-option value="never">Never</mat-option>
<mat-option value="custom" (click)="openEndDateModal(endDateReference)">Custom</mat-option>
</mat-select>
</mat-form-field>
<span class="repeat-custom-value" *ngIf="eventForm.controls['endDateCriteria'].value === 'custom'" (click)=selectEndDate.open()> {{endDate | date}}
</span>
</div>
</div>
</mat-tab>
<mat-tab label="Out of Office">
<div class="col-md-12 p-0">
<div class="title-section event-fields">
<mat-form-field [color]="underLineColor">
<input matInput formControlName="title">
</mat-form-field>
</div>
<div class="datepicker-section time-selection event-fields">
<mat-icon>access_time</mat-icon>
<mat-label>Date & time</mat-label>
<mat-form-field [color]="underLineColor">
<!-- <mat-label>Choose a date</mat-label> -->
<input formControlName="datePicker" matInput [matDatepicker]="picker5" [min]="yesterday" (click)="picker5.open()">
<mat-datepicker #picker5></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill" class="time-select-value time-from" *ngIf="!allDayEvent">
<mat-select [(value)]="selectedTimeFrom" [disabled]="allDayEvent">
<mat-option *ngFor="let timeFrom of selectTime" [value]="timeFrom.value">
{{timeFrom.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="time-select-value" *ngIf="!allDayEvent">
<mat-select [(value)]="selectedTimeFrom">
<mat-option *ngFor="let timeTo of selectTime" [value]="timeTo.value">
{{timeTo.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [color]="underLineColor" class="pl-2 time-to" *ngIf="allDayEvent">
<!-- <mat-label>Choose a date</mat-label> -->
<input formControlName="datePicker" matInput [matDatepicker]="picker6" [min]="eventForm.controls['datePicker'].value" (click)="picker6.open()">
<mat-datepicker #picker6></mat-datepicker>
</mat-form-field>
<div class="clearfix"></div>
<mat-checkbox formControlName="allDayEvent" [(ngModel)]="allDayEvent">All Day</mat-checkbox>
</div>
<div class="message-section event-fields">
<div class="form-group p-0">
<mat-label class="p-0">Message</mat-label>
<mat-form-field [color]="underLineColor" appearance="fill">
<input matInput formControlName="timeMessage" placeholder="Enter Message">
</mat-form-field>
</div>
<!-- <div class="add-shift col-md-2 offset-md-9">
<button mat-raised-button class="shift-btn">Add Shift</button>
</div> -->
</div>
<div class="recurrence-section event-fields {{repeatOption == 'custom' ? 'repeat-custom-option':''}}">
<mat-icon>replay</mat-icon>
<mat-label>Repeat</mat-label>
<mat-form-field appearance="fill">
<!-- <mat-label>Choose a date</mat-label>-->
<mat-select #selectRepeatOptions (selectionChange)="recurrence($event, customRecurrence)"
formControlName="recurrenceCriteria" [(ngModel)]="repeatOption">
<mat-option *ngFor="let option of recurrenceOptions" [value]="option">
{{option | titlecase}}</mat-option>
</mat-select>
</mat-form-field>
<span class="repeat-custom-value" *ngIf="repeatOption == 'custom'" (click)=selectRepeatOptions.open()> {{repeatType == 'week' ? 'Weekly on' : repeatType}}
<span class="week-values" *ngIf="repeatType == 'week'"><span *ngFor="let day of weekDays"> {{day}} </span>
</span>
</span>
</div>
<div class="date-range-section event-fields" *ngIf="eventForm.controls['recurrenceCriteria'].value === 'does not repeat' ">
<!-- <img src="/assets/images/check_outline.svg" alt="done">-->
<mat-icon>check_circle_outline</mat-icon>
<mat-label class="p-0">Expiry Date</mat-label>
<mat-form-field appearance="fill">
<mat-date-range-input [rangePicker]="picker1">
<input matStartDate formControlName="dateRangeStart" matInput placeholder="Start date">
<input matEndDate formControlName="dateRangeEnd" matInput placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-date-range-picker #picker1></mat-date-range-picker>
</mat-form-field>
</div>
</div>
</mat-tab>
<mat-tab label="Holiday">
<div class="col-md-12 p-0">
<div class="title-section event-fields">
<mat-form-field [color]="underLineColor">
<input matInput formControlName="title">
</mat-form-field>
</div>
<div class="message-section event-fields">
<div class="form-group p-0">
<mat-label class="p-0">Message</mat-label>
<mat-form-field [color]="underLineColor" appearance="fill">
<input matInput formControlName="timeMessage" placeholder="Enter Message">
</mat-form-field>
</div>
</div>
<div class="recurrence-section event-fields {{repeatOption == 'custom' ? 'repeat-custom-option':''}}">
<mat-icon>replay</mat-icon>
<mat-label>Repeat</mat-label>
<mat-form-field appearance="fill">
<!-- <mat-label>Choose a date</mat-label>-->
<mat-select #selectRepeatHoliday (selectionChange)="recurrence($event, customRecurrence)"
formControlName="recurrenceCriteria" [(ngModel)]="repeatOption">
<mat-option *ngFor="let option of recurrenceOptions" [value]="option">
{{option | titlecase}}</mat-option>
</mat-select>
</mat-form-field>
<span class="repeat-custom-value" *ngIf="repeatOption == 'custom'" (click)=selectRepeatHoliday.open()> {{repeatType == 'week' ? 'Weekly on' : repeatType}}
<span class="week-values" *ngIf="repeatType == 'week'"><span *ngFor="let day of weekDays"> {{day}} </span>
</span>
</span>
</div>
<div class="date-range-section event-fields">
<mat-icon>access_time</mat-icon>
<mat-label>Expiry Date</mat-label>
<!-- <img src="/assets/images/check_outline.svg" alt="done"> -->
<mat-form-field appearance="fill">
<mat-date-range-input [rangePicker]="picker2">
<input matStartDate formControlName="dateRangeStart" matInput [min]="yesterday" placeholder="Start date">
<input matEndDate formControlName="dateRangeEnd" matInput [min]="yesterday" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-date-range-picker #picker2></mat-date-range-picker>
</mat-form-field>
</div>
</div>
</mat-tab>
</mat-tab-group>
<div class="select-calendar-section">
<!-- <img src="/assets/images/calendar.svg" alt="cal">-->
<mat-icon>today</mat-icon>
<!-- <div class=""> -->
<mat-label>Select Calender</mat-label>
<mat-form-field appearance="fill">
<mat-select formControlName="calendars" [(ngModel)]="selectedCalendar" [(value)]="selectedCalendar">
<mat-option *ngFor="let calendar of calendarList" [value]="calendar.name" >
{{calendar?.name}}</mat-option>
</mat-select>
</mat-form-field>
<!-- </div> -->
<!-- <div class=""> -->
<mat-form-field #colorMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="colorPicker"
style="margin-left: 2.125rem;" appearance="fill">
<mat-select [ngStyle]="{'background':selectedColor}" class="color-select" formControlName="color">
</mat-select>
</mat-form-field>
<!-- </div> -->
</div>
<div class="template-action row">
<div class="col-md-12">
<div class="form-action-area">
<button mat-raised-button (click)="onClose()" class="gray-btn">Cancel</button>
<button mat-raised-button [disabled]="!eventForm.valid" (click)="onEventSave()" [mat-dialog-close]="true"
class="blue-btn service-trigger">{{saveBtnText}}</button>
</div>
</div>
</div>
</form>
</div>
</div>
</ng-template>
这是我附上的完整表格，仅供参考。
这是初始化，
this.eventForm = this.fb.group({
title: ["Title", [Validators.required]],
datePicker: [""],
shifts: this.fb.array([]),
endDate: [""],
calendars: ["", [Validators.required]],
color: [""],
endDateCriteria: ["never"],
recurrenceCriteria: ["does not repeat"],
timeMessage: [""],
allDayEvent: false,
// dateRange: this.fb.group({
dateRangeStart: [""],
dateRangeEnd: [""],
recurrenceRule: [""]
});
事件 From 包含所有这些 formControl。
问题如下所述。
现在，当我单击创建按钮并且该事件包含事件表单的所有值时，真正的问题出现了。如何有效地处理选项卡。
我想到的第一个解决方案是，我根据 tabIndex 从 from 中提取值并调整有效负载并将其发送到后端进行保存。
onEventSave() {
if(this.activeTabIndex === 0) {
const formData = this.eventForm.value;
console.log("this is the first tab index")
console.log("Here is on submit now",this.eventForm.value);
} else if(this.activeTabIndex === 1) {
console.log("this is the second tab index")
} else if(this.activeTabIndex === 2) {
console.log("this is the third tab index")
}
}
这就是我处理所有事件并将其保存在数据库中并在有效负载中添加 eventType 字段的方式。这是一种有效的方法吗？ ？
如果我使用它，那么我将如何处理更新情况，就像当我单击日历上的事件时，我将如何转到相应的选项卡表单和补丁值。 ？
如果我需要使用任何其他方式来处理此类日历应用程序，那么我将如何获取在单独的 div 中使用的颜色和日历的值？如果我将它放在每个 mat-tab 中并使用它，它将是重复的代码。对吗？
或者我需要以不同且有效的方式处理选项卡。请告诉我，您可以查看 html 文件代码，我可以做得更好。
建议/相关文章/演示。欢迎大家。
我想以不同的方式处理角度反应形式的三个选项卡，并从选项卡中提取值并进一步有效地处理它。
如何使用表单中的单个创建按钮创建不同的事件，例如外出/营业时间/假日事件，并从相应的选项卡中提取值并进一步处理。我该如何处理更新情况。
谢谢。
一种解决方案可能是在您的
eventFormthis.eventForm = this.fb.group({
businessHoursGroup: this.fb.group({...}),
shiftHoursGroup: this.fb.group({...}),
...
});