标签: angular-material2

我正在尝试使用设置表单控件*ngFor数组中的对象来设置表单控制。根据用户的不同，有时我的数组中会有 1 个对象，但有时会有多个对象。

我的问题是我想创建一个formControlName使用循环，但不确定如何在组件中设置表单组验证器？只需像下面这样设置它们就意味着如果只有 1 个对象，则在查找formControlName不存在的另一个对象时，表单仍然无效。

因此，如果名称为“Days”的第一个对象不在列表中，“Days”仍然会出现this.form在控件中：

大批：

indicators = [
  {name:"Days",data:[250,1]},
  {name:"Multiply Average",data:[3,.25,1]}
],

成分：

ngOnInit() {
    this.form = this._fb.group({
            "Multiply Average":['', Validators.compose([
                Validators.required
                ])],
            "Days":['', Validators.compose([
                Validators.required
                ])],
        });  
    };

模板：

  <span
     *ngFor="let i of indicators">
          {{i.name}}: 
          <md-slider
            formControlName={{i.name}}
            color="primary"
            [max]=i.data[0]
            [thumb-label]="true"
            [step]=i.data[1]
            [min]=i.data[2]>
          </md-slider>
  </span>

任何帮助都会很棒

我正在使用 Angular Material 滑块，我想在滑块的两端显示代表滑块设置的最小值和最大值的标签。或者，我想显示一个带有点和相对标签的比例，显示哪个值与哪个点相关。这是 javascript 库提供的其他滑块中存在的功能，但我在 Angular Material 滑块 API 中没有找到类似的功能。我想知道使用 Angular Material 提供的滑块是否也可以获得类似的行为。

我的项目使用相同形式的 3 个自动完成组件，当用户离开而不选择任何选项时，我使用以下代码将文本字段设为空白，

@ViewChild(MatAutocompleteTrigger) bedTrigger:MatAutocompleteTrigger;
bedTrigger.panelClosingActions
        .subscribe(e => {
          console.log("ward");
          if (!(e && e.source)) {
            this.orgInfoForm.get('fieldName').setValue(null);
            this.wardTrigger.closePanel();
          }
}); 

bedTrigger 始终引用第一个自动完成组件，不能引用其他两个自动完成组件。我认为每个自动竞争都会得到一个 MatAutocompleteTrigger ，实际上表单只有一个 MatAutocompleteTrigger ，而这个引用第一个自动完成组件，我尝试

@ViewChild(MatAutocompleteTrigger) triggers:QueryList<MatAutocompleteTrigger>;

引用所有触发器，但我只得到一个 MatAutocompleteTrigger。请指导我如何获取对 angualr Material 2 版本 5.0.2 中其他两个自动完成组件的 MatAutocompleteTrigger 引用。

我在使用角度和角度材料框架的组件设计时遇到了一些问题。

一切都是基于一个mat-sidenav-container. sidenav 包含手风琴 - 可扩展的列表，比方说“类别”。每个扩展面板内都有一个项目选择列表。到目前为止，一切都很好。

在选择列表上方，我添加了一个mat-list包含一项的常规项。该项目包含标题和“全选”选项。对于“全选”实用程序，我使用了相关的可点击的mat-icon.

mat-icon一切似乎都运行良好，除了设置为时的情况check_box_outline。此类图标会导致水平滚动条出现在侧面导航中。看起来图标后面添加了一些空格，但我不明白为什么。它不会出现在其他图标上，也不会check_box_outline_blank出现indeterminate_check_box。

有谁知道到底是什么导致了这个错误以及如何防止滚动条出现？

我将相关代码和演示放在stackblitz 上（在app文件夹内）。我使代码尽可能简单只是为了演示这个问题。我将不胜感激任何帮助。

我有一个angular 5 material checkbox周围有 div 和一些其他元素。我希望单击与直接单击div相同。clickcheckbox

这是我的示例代码：

<div (click)="checked = !checked">
  <mat-checkbox class="example-margin" [(ngModel)]="checked">
                I'm a not working checkbox :'(                  
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>

和堆栈闪电战

目前，单击复选框本身不起作用，单击 div 外部才起作用。有任何想法吗？

我正在尝试根据以下要求设置 mat-checkbox (material2) 样式：

始终可见的黑色边框（无论检查状态如何）(#0000000)

选中后，“勾号”将是白色（#ffffff），在彩色（青色）背景上（边框仍然可见）

未选中时，复选框的背景（边框内）应为灰白色 (#dddddd)。

到目前为止，我已经能够设置边框颜色，但是当检查时，它会消失，背后的颜色

我可以设置未选中的背景颜色，但同样，当我这样做时，黑色边框消失了。如果我删除此设置，边框会出现，但背景颜色是错误的。

我设置的scss属性如下：

::ng-deep .mat-checkbox .mat-checkbox-frame {
    border-color: mat-color($darkPrimary, darker); //black
  }

::ng-deep .mat-checkbox-background {
    background-color: mat-color($darkPrimary, 200); //off-white
}

似乎无论我将背景设置为什么，都会覆盖边框样式。此外，当我更改复选框的状态时，黑色边框短暂出现，然后再次消失。我如何满足这些要求？

问题陈述：我正在实施 Angular 材料mat-form-field属性。我将表单字段外观作为大纲。我试图在选择输入时更改输入边框的颜色。

预期行为。选择输入时，输入字段轮廓边框颜色应更改。当表单域处于活动状态时，我想将轮廓的颜色更改为黑色。

当前行为：现在，当表单字段处于活动状态时，它会显示角度材料默认原色。

这都是我的依赖

{
  "dependencies": {
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "aws-amplify": "^1.1.6",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0", …

我有一个函数可以打开一个带有名为“NoteFormComponent”的组件的 MatDialog，它看起来像这样

  openForm() {
    let dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    dialogConfig.width = "95%";
    dialogConfig.panelClass = "form-dialog";
    dialogConfig.scrollStrategy = new NoopScrollStrategy();

    this.dialog.open(NoteFormComponent, dialogConfig).beforeClose().subscribe(() => this.getNotes());
  }

我弹出一个包含“NoteFormComponent”的模式。 那么问题是什么？

问题是我想在没有 MatDialog 的情况下使用“NoteFormComponent”，但是为了将它与 MatDialog 一起使用，我必须像这样在组件的构造函数中注入一个引用

  constructor(
    private noteService : NoteService, 
    private productService : ProductService,
    private categoryService : CategoryService,
    private clientService : ClientService,
    private notification : NotificationService,
    private dialogRef : MatDialogRef<NoteFormComponent>, /*This Reference*/
    private loader : LoaderService,
    private sessionService : SessionService,
    private securityBlockerService : SecurityBlockerService,
    private dialog : MatDialog,
    private …

我想删除下图中灰色的选项卡组的底部边框。

这是一个显示代码的示例项目：

https://stackblitz.com/edit/angular-tabs-remove-bottom-border

我正在研究 Angular7 及其兼容的ngx-mat-datetime-picker。它按预期工作。

想自定义格式：

实际： mm/dd/yyyy, hh:mm:ss 预期： yyyy-mm-dd hh:mm:ss

目前我没有找到任何格式化选项。

我在模板中尝试过类似的东西 value="{{ mydate | date: 'yyyy-mm-dd hh:mm:ss' }}

但不工作。