я сейчас работаю над угловым проектом, где сотрудник выберет дату из углового datePicker, и появится всплывающая таблица, показывающая дни этого месяца, и под каждым днем ввод, где он может ввести 1 или 0, зависит от того, работал он в этот день или нет . моя проблема в том, что я не знаю, как получить данные, которые ввел пользователь, и записать эти данные в консоль всякий раз, когда он нажимает кнопку «Сохранить».
примечание: выбор даты немного странный (я не импортирую некоторые пакеты) в StackBlitz, я не знаю, как это исправить, но в моем приложении он работает просто отлично, я сожалею об этом, просто выбрал дату, и таблица изменится в соответствии с введенная дата, мой тс файл:
import { Component, OnInit } from '@angular/core';
import {FormControl, FormArray, FormGroup, FormBuilder} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { DatePipe } from '@angular/common'
import * as moment from 'moment';
import { Moment } from 'moment';
export const MY_FORMATS = {
parse: {
dateInput: 'MM/YYYY',
},
display: {
dateInput: 'MM/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css'],
providers: [
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
})
export class ProjectComponent implements OnInit {
monthDates: String[] = [];
daysOfMonth !: number ;
daysArray !: FormGroup;
constructor(public datePipe : DatePipe, private fb:FormBuilder) { }
ngOnInit(): void {
this.daysArray = this.fb.group({
daysWorked : this.fb.array([
new FormControl(''),
])
})
let today = new Date();
let todayMonth = today.getMonth() +1;
let todayYear = today.getFullYear() ;
const month = Number(todayMonth);
const year = Number(todayYear);
console.info(month);
console.info(year);
this.monthDates = this.getDaysArray(year,month);
this.daysOfMonth = this.monthDates.length;
}
getDaysArray = (year: number, month: number) => {
const names = Object.freeze(
[ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ]);
const date = new Date(year, month - 1, 1);
const result = [];
while (date.getMonth() == month - 1) {
result.push(`${date.getDate()}
${names[date.getDay()]}`);
date.setDate(date.getDate() + 1);
}
return result;
}
date = new FormControl(moment());
setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
const ctrlValue = this.date.value;
ctrlValue.month(normalizedMonthAndYear.month());
ctrlValue.year(normalizedMonthAndYear.year());
this.date.setValue(ctrlValue);
datepicker.close();
}
dateChanged($event: MatDatepickerInputEvent<Date>) {
let monthChosen = moment($event.target.value).format("MM");
let yearChosen =moment($event.target.value).format("yyyy");
let month = Number(monthChosen);
let year = Number(yearChosen);
this.monthDates = this.getDaysArray(year,month);
this.daysOfMonth = this.monthDates.length;
}
addDaysWorked() {
console.info("add Days Worked !");
}
editDaysWorked() {
console.info("Edit Days Worked");
}
}
мой CSS:
.fixTop {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 100px;
margin-left: 100px;
}
.form-control {
/* padding: 30%; */
padding-left: 10px;
padding-right: 2px;
size: 1;
}
.fixTable {
margin-top: 50px;
margin-right: 300px;
}
.top {
margin-top: 100px;
}
.aaa{
margin-inline: 15%;
}
.example-month-picker .mat-calendar-period-button {
pointer-events: none;
}
.example-month-picker .mat-calendar-arrow {
display: none;
}
.right {
margin-left: 200px;
}
.c5 {
background-color: blue;
}
мой HTML:
<div class = "d-flex">
<div class = "ms-5 mx-5 col-1">
<mat-form-field appearance = "outline">
<mat-label>Month and Year</mat-label>
<input matInput [matDatepicker] = "dp" [formControl] = "date" (dateChange) = "dateChanged($event)">
<mat-datepicker-toggle matSuffix [for] = "dp"></mat-datepicker-toggle>
<mat-datepicker #dp
startView = "year"
panelClass = "example-month-picker">
</mat-datepicker>
</mat-form-field>
</div>
<div class = "card shadow-sm p-3 right bg-body rounded aaa">
<span>
<span class = "border pt-1 ps-4 bg-info me-1"></span> <span>Jours férié</span>
<span class = "border pt-1 ps-4 bg-success ms-5 me-1"></span> <span>RTT Employeur</span>
<span class = "border pt-1 ps-4 bg-danger ms-5 me-1"></span> <span>Absence ou congés</span>
<span class = "border pt-1 ps-4 bg-primary ms-5 me-1"></span> <span>RTT Salaré(e)</span>
</span>
</div>
</div>
<div>
<form>
<div class = "mt-5">
<div class = "d-flex mx-5 me-5 mb-5">
<table class = "table">
<thead>
<tr>
<th scope = "col" *ngFor = "let date of monthDates">{{ date }}</th>
</tr>
</thead>
<tbody>
<tr>
<td *ngFor = "let i of [].constructor(this.daysOfMonth)">
<input class = "form-control" type = "text" value = "0" size = "1" maxlength = "1">
</td>
</tr>
<tr>
<td *ngFor = "let i of [].constructor(this.daysOfMonth)">
<input disabled class = "form-control" type = "text" value = "" size = "1" maxlength = "1">
</td>
</tr>
</tbody>
</table>
<br>
</div>
<div [align] = "'center'">
<button mat-raised-button (click) = "addDaysWorked()" color = "primary" > save </button>
<button class = "ms-3" mat-raised-button (click) = "editDaysWorked()" color = "warn" > edit </button>
</div>
</div>
</form>
</div>
это мой StackBlitz: стекБлиц
Например:
<form novalidate (ngSubmit) = "save()" [formGroup] = "form">
<div formArrayName = "days" *ngFor = "let day of days.controls; let i = index">
<div [formGroupName] = "i">
<label [for] = "i">
<input
class = "form-check-input"
[id] = "i"
type = "text"
[value] = "form.value.days[i].day"
formControlName = "day"
name = "day"
/>
Day {{ i }}
</label>
</div>
</div>
<button type = "submit">Save</button>
</form>
Например:
export class AppComponent implements OnInit {
form: FormGroup;
get days(): FormArray {
return this.form.get('days') as FormArray;
}
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
days: this.fb.array([])
});
this.addDay() // when you get the days in a month you loop over them and call addDay()
this.addDay() // I am just calling it twice here for the sake of brevity
}
addDay(): void {
this.days.push(this.buildDay());
}
buildDay(): FormGroup {
return this.fb.group({
day: '0' // Default can also be ''
});
}
save() {
console.info(this.form.value)
}
}
Обратите внимание, что вы можете распечатать значения, содержащиеся в форме, потому что теперь они должным образом связаны.
Это должно дать вам суть. Если у вас возникнут дополнительные проблемы или возникнут какие-либо вопросы, просто кричите.
Вот Stackblitz, с которым вы можете поиграть.
Конечно, вы можете добавить больше полей к объектам дня в функции buildDay()
, чтобы она содержала данные дня/месяца/года и т. д., чтобы у вас было больше информации для отображения при циклическом просмотре в шаблоне, отличном от «день 0'.
Это не проблема углового материала, вы можете удалить этот тег. В своем ответе я предоставил вам простой и чистый способ создания динамической реактивной формы, указав при этом на некоторые важные директивы и идеи по созданию формы.