标签: angular-material2

我在我的应用程序中使用了Material 2,但在这个问题中,我想用Input专门解决问题.

正如您在API Reference中看到的那样,有一个名为的属性绑定required,在占位符中显示为星号.

所以,我想知道是否有办法检查表单控件是否在Angular中有一个特定的验证器,因为我真的不想为每个输入手动设置[required]="true/false"

我阅读了AbstractControl文档,但我没有找到任何相关内容.我遇到的hasError 方法(这具有讽刺意味的是没有记录无处 ......无论是在FormGroup也不FormControl也不AbstractControl),但是这不是我要找的.它只是检查表单控件是否有错误,但正如您可能已阅读过,我想检查控件是否有一些特定的验证器...

一些代码:

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="anyCtrl.hasValidator('required')"> <!-- something like this -->
</md-input-container>

我希望这个问题足够清楚.提前致谢.

我正在尝试设置2个字段值<input matInput>abnd <mat-select>编程.对于文本输入,一切都按预期工作,但是对于<mat-select>视图,这个字段就像它有价值一样null.但是,如果我打电话,console.log(productForm.controls['category'].value它会打印出我以编程方式设置的正确值.我错过了什么吗？

这是代码:

表单配置:

productForm = new FormGroup({
        name: new FormControl('', [
            Validators.required
        ]),
        category: new FormControl('', [
            Validators.required
        ]),
    });

设定值:

ngOnInit() {
        this.productForm.controls['name'].setValue(this.product.name);
        this.productForm.controls['category'].setValue(this.product.category);
    }
}

HTML:

<mat-form-field>
    <mat-select [formControlName]="'category'"
                [errorStateMatcher]="errorStateMatcher">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

我们正在为我们的应用使用Angular Material表:

https://material.angular.io/components/table/overview

<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

你能否展示如何在鼠标悬停上突出显示一行？

我在这个项目中使用Angular 2 Material sidenav:

<md-sidenav-layout>
  <md-sidenav #start mode="side" [opened]="true">
      <md-nav-list>
      </md-nav-list>
  </md-sidenav>

  <button md-button (click)="start.toggle()">Close</button>

  <router-outlet></router-outlet>

</md-sidenav-layout>

如何start.toggle()使用click事件从我的组件调用而不是元素？

谢谢你的阅读

我正在试验Angular2和Angular Material.我曾经*ngFor让Angular <input>为我生成元素.但是,在生成的网页中,生成的元素没有name属性.

这是代码的一部分order-form.component.html,它要求用户输入不同种类的水果的数量:

<md-list-item>
  <md-icon md-list-icon>shopping_cart</md-icon>
  <md-input-container *ngFor="let fruit of fruits" class="fruit-input">
    <input mdInput [(ngModel)]="order[fruit]" [placeholder]="capitalize(fruit)" 
           [id]="fruit" name="{{fruit}}" required value="0" #fruitInput 
           (input)="onInput(fruitInput)">
  </md-input-container>
</md-list-item>

这是相应的order-form.component.ts:

import { Component, OnInit } from "@angular/core";
import { Order } from "app/order";
import { PAYMENTS } from "app/payments";
import { OrderService } from "app/order.service";

@Component({
  selector: 'app-order-form',
  templateUrl: './order-form.component.html',
  styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent implements OnInit {

  order = new Order();

  payments = …

我正在使用材料2版本2.0.0-beta.12.我需要调整材质Modal的位置.我按照这个答案来做到这一点./sf/answers/3096708961/由于MdDialog现在不可用,我使用了{MatDialog,MatDialogRef,MAT_DIALOG_DATA}.

constructor(public dialog: MatDialog,public dialModRef:MatDialogRef<any>) {}

当我将MatDialogRef添加到我的构造函数时,它给了我"没有MatDialogRef的提供程序"错误.请你帮我解决这个问题吗？

对话框的概述,example.ts

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from 
'@angular/material';

@Component({
   selector: 'dialog-overview-example',
   templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {

   animal: string;
   name: string;

   constructor(public dialog: MatDialog,public 
   dialModRef:MatDialogRef<any>) {}

   openDialog(): void {
       let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
        width: '500px',
        data: { name: this.name, animal: this.animal }
   });

   dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
   });
 }
}

@Component({
   selector: 'dialog-overview-example-dialog',
   templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog …

我正在使用Angular Material 5.0.0-rc0Angular 5应用程序中的最新版本.我试图datepicker用Angular材料提供一系列日期,但我找不到任何关于它的文档.

我可以使用它是选择一个startDate或设置minDate和maxDate.这是HTML代码

<mat-form-field>
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

和TS代码

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

此代码可帮助我选择最小和最大日期范围内的一个日期,但不允许选择它们的范围.虽然使用第三方库可以解决这个问题,但它会有一个不同的UI,这将与我当前的应用程序的UI不同.请帮我解决这个问题.

我来找你谈论角材料的问题.事实上,我认为这是一个问题,但我更喜欢先找一个误解.

关于我的问题的第一件事是上下文,我尝试做一个包含两个输入的简单表单:密码及其'确认.

用户form.component.ts

this.newUserForm = this.fb.group({
  type: ['', Validators.required],
  firstname: ['', Validators.required],
  lastname: ['', Validators.required],
  login: ['', Validators.required],
  matchingPasswordsForm: this.fb.group(
    {
      password1: ['', Validators.required],
      password2: ['', Validators.required],
    },
    {
      validator: MatchingPasswordValidator.validate,
    },
  ),
  mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
  cbaNumber: [
    '411000000',
    [Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
  ],
  phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
}

我的兴趣是匹配PasswordsForm FormGroup.你可以在上面看到验证器.

验证器在这里:

匹配-password.validator.ts

export class MatchingPasswordValidator {
    constructor() {}

    static validate(c: FormGroup): ValidationErrors | null {
        if (c.get('password2').value !== c.get('password1').value) {
            return { matchingPassword: true};
        }
        return null;
    }
}

和HTML. …

当我选择日期时,我在字段中看到了正确的日期,但是,当我保存时,日期选择器发送我选择的日期前一天(3小时偏移)我使用角度响应形式和MatMomentDateModule用于日期选择器.

问题与时区有关,但我只想保存用户输入数据库的相同日期.

代码在这里重新编写:https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk ？ file = app%2Fapp.module.ts

与githup相关的问题:

https://github.com/angular/material2/issues/7167

任何帮助表示赞赏,我认为很多开发人员需要一个解决方案.

我想使用Angular Material 2库,因为它的(不断增加的列表)组件.但是我习惯于引导它,它的好处就像响应实用程序和轻量级用户界面的典型事物.通过Bootstrap我主要是指它的CSS部分,我几乎从不需要它的JS功能.

例如,在Material lilbrary中,列表组几乎没有样式,而Bootstrap则使用它的css.

我记得读到结合它们并不是一个好主意,主要是因为它们的全球应用程序范围的风格会发生冲突.我找不到那个来源而且我很好玩 - 当前版本是真的吗？如果是这样,究竟什么是冲突的,如何解决？