- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 Angular Material 的 Angular 8 应用程序。我正在尝试创建一个可重用的表单组件来实现 ControlValueAccessor
界面。它包含自己的具有两个控件的表单,如下所示:
<form [formGroup]="form">
<mat-form-field>
<mat-label>{{ nameLabel }}</mat-label>
<input
matInput
type="text"
formControlName="name"
[disabled]="disabled"
(blur)="onTouched()"/>
<ng-content select="[name-errors]"></ng-content>
</mat-form-field>
<mat-form-field>
<mat-label>{{ dateLabel }}</mat-label>
<input
matInput
[matDatepicker]="picker"
formControlName="plannedEnd"
[disabled]="disabled"
(blur)="onTouched()"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<ng-content select="[date-errors]"></ng-content>
</mat-form-field>
</form>
import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormComponent, FormModel } from '@turntown/shared';
import * as moment from 'moment';
import { CreateScheduleReport } from '@turntown/cost-control/set-up/shared';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
@Component({
selector: 'cc-name-and-date',
templateUrl: './name-and-date.component.html',
styleUrls: ['./name-and-date.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NameAndDateComponent),
multi: true,
}],
})
export class NameAndDateComponent implements OnInit, FormComponent, ControlValueAccessor, OnDestroy {
@Input() nameLabel: string;
@Input() dateLabel: string;
private readonly unsubscribe$ = new Subject<void>();
disabled;
form;
onChange = (value: CreateScheduleReport) => {};
onTouched = () => {};
writeValue(newValue: CreateScheduleReport): void {
this.form.setValue(newValue);
this.onChange(newValue);
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}
constructor(protected formBuilder: FormBuilder) {
}
ngOnInit() {
this.form = this.initForm();
this.onChange(this.form.value);
this.form.valueChanges.pipe(
takeUntil(this.unsubscribe$),
).subscribe(newFormValue => {
this.onChange(newFormValue);
this.onTouched();
});
}
hasError(formControlName: string, error: string): boolean {
MomentDateAdapter
return this.form.get(formControlName).hasError(error) && this.form.get(formControlName).touched;
}
initForm(): FormGroup {
const form: FormModel<CreateScheduleReport> = {
name: [''],
plannedEnd: [moment()],
};
return this.formBuilder.group(form);
}
submitForm(event: any): void {
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
<form [formGroup]="form">
<section class="first-reporting-period-details">
<mat-card>
<h1>First reporting period details</h1>
<h3 tt-small>Planned end date of period</h3>
<cc-name-and-date
nameLabel="Period Name"
dateLabel="Period End Date"
formControlName="period">
<ng-container name-errors>
<mat-error *ngIf="hasError('period', 'invalidPeriodName')">
This is mandatory
</mat-error>
</ng-container>
<ng-container date-errors>
<mat-error *ngIf="hasError('period', 'invalidPeriodDate')">
The first reporting period end date must be today or later
</mat-error>
</ng-container>
</cc-name-and-date>
</mat-card>
</section>
<section class="first-stage-details">
<mat-card>
<h1>First stage details</h1>
<h3 tt-small>Planned end date of stage</h3>
<cc-name-and-date
nameLabel="Stage Name"
dateLabel="Stage End Date"
formControlName="stage">
<ng-container name-errors>
<mat-error *ngIf="hasError('stage', 'invalidStageName')">
This is mandatory
</mat-error>
</ng-container>
<ng-container date-errors>
<mat-error *ngIf="form.hasError('invalidStageDate')">
The first stage end date must be the same as the first reporting period end date or later
</mat-error>
</ng-container>
</cc-name-and-date>
</mat-card>
</section>
</form>
<mat-error>
s 在投影时处于不同的位置,但我不知道为什么。任何人都可以帮忙吗?
最佳答案
你有没有尝试把 <ng-container>
内<mat-error>
?
我试图为自定义错误制作一个组件并像这样使用它
<mat-error>
<form-error [control]="formGroup.controls.type" field="Name"></form-error>
</mat-error>
关于angular - 无法将 <mat-error> 投影到自定义组件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58661301/
我已经彻底搜索过,但没有找到直接的答案。 将 opencv 矩阵 (cv::Mat) 作为参数传递给函数,我们传递的是智能指针。我们对函数内部的输入矩阵所做的任何更改也会改变函数范围之外的矩阵。 我读
是否可以有一个垫子分隔线(一条水平线分隔两个垫子选项)? 我试过: Cars Volvo Saab Mercedes Audi
使用的浏览器 - Chrome 67.0.3396.99 我创建了一个 DialogsModule它有一个组件 ConfirmDialog.component.ts使用以下模板 confirm-dia
我正在尝试使用 mat-toolbar 但出现错误: mat-menu.component.html: Responsive Navigation Menu I
我正在创建 angular 7 网络应用程序,并使用一个 mat-select 下拉菜单和一个 mat-paginator。现在我隐藏 mat-select 向下箭头。 Here is the mat
在我的应用程序中,我有一个通过引用接收 cv::Mat 对象的函数。这是函数的声明: void getChains(cv::Mat &img,std::vector &chains,cv::
我使用了独立的 EMA (1.5.0) 和 eclipse 插件(在 eclipse 4.5 中)来分析我的堆转储。 我想查看任何无法访问的对象信息,我已尝试在我的首选项和命令行选项 -keep_un
我是 flex 的新手,我的垫子 table 做得很好。 不幸的是,我的标题没有遵循我的单元格宽度。 这是我的结果的图片。 如您所见,我的标题与我的单元格不对齐。 这是我的 CSS 代码,就像我说我是
我试图在我的 Material 表上使用 mat-sort 和 mat-paginator,但似乎不起作用。 Table 确实获取了 dataSource.data 中的数据,它也显示在 mat-ta
我试图在我的 Material 表上使用 mat-sort 和 mat-paginator,但似乎不起作用。 Table 确实获取了 dataSource.data 中的数据,它也显示在 mat-ta
我想在每个 mat-option 文本上设置悬停样式,我希望文本显示在 mat-option 之外。为了实现这一点,我应用了非常高的 z-index 值,但没有任何改变。我尝试将 z-index 添加
默认情况下 mat-drawer-container/mat-sidenav-container 和 mat-drawer/mat-sidenav 高度基于 mat-drawer-cont
在 mat-card-header 中提供图像头像通过 mat-card-avatar 得到很好的支持. 在许多用例中,我们希望使用图标而不是图像作为卡片的“头像”。 有没有一种简单的方法可以用图标替
我想要一个包含 2 列的网格列表,并且在这些列中我想要 2 个垂直堆叠的复选框。 我看过 this question 这确实有点 工作,但我想知道是否有更简洁的方法解决这个问题,因为我必须使用大量的
更新:stackbliz https://angular-2wqf4b.stackblitz.io 我正在构建一个比较屏幕,我们可以在其中比较两个项目。我试图将这两项显示为两个 mat-cards里
试图模仿 Material guide 的外观,我无法让工具栏的阴影呈现在 mat-sidenav-container 元素之上: 显示工具栏和 sidenav 的页面,但投影不可见: 单独显示工具栏
请注意,分页/排序无法正常工作。分页不显示它显示的元素数量并且排序不起作用,但是如果您删除 html 文件中的行 *ngIf="dataSource?.filteredData.length > 0"
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Proper stack and heap usage in C++? Heap vs Stack allo
单击每个单选按钮时,我需要为每个垫卡添加背景。背景应仅适用于与单击的垫单选按钮对应的垫卡。
Mat a = (Mat_(3,3) = 2 int dims; //! the number of rows and columns or (-1, -1) when the arr
我是一名优秀的程序员,十分优秀!