标签: angular-material-7

我正在尝试将角材料 mat-select 与反应形式一起使用，并收到错误消息“没有名称用于表单控件的值访问器：'productUnitofMeasure'”。

其他 FormControl 在这里工作正常，我已经在 app 模块中包含了所有必需的模块。

应用模块：

import {MatFormFieldModule, MatOptionModule, MatSelectModule, MatInputModule} from '@angular/material';

imports:[
MatFormFieldModule,
MatOptionModule,
MatSelectModule,
MatInputModule,
ReactiveFormsModule]

模板：

<mat-form-field>
<mat-select placeholder="Unit Type">
    <mat-option *ngFor="let unitType of unitList" matInput formControlName="productUnitofMeasure" [value]="unitType.unitId">{{unitType.unitDescription}}</mat-option>
</mat-select>

成分：

this.productForm = new FormGroup({
  productName: new FormControl,
  productDescription: new FormControl,
  productPrice: new FormControl,
  productAvailableQuantity: new FormControl,
  productUnitofMeasure: new FormControl //this is the only control giving me an error.


});

我正在使用Anugular 7和角材。我目前在尝试通过提交表单时遇到错误

（ngsubmit）=“ changePassword（formData）”

页面上的其他ngSubmit都可以正常工作，提交时没有问题。只是想知道是否有人遇到过此问题/知道解决方案。

home.component.html（代码段）

<ng-template #changePassword let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Change Password</h4>
        <button type="button" class="close" (click)="d('Cross Click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div *ngIf="msg" role="alert" class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <mat-icon>done</mat-icon>
            <span class="sr-only">Error:</span>
            {{modalMsg}}
        </div>
        <form novalidate (ngSubmit)="changePassword(changePasswordFrm)" [formGroup]="changePasswordFrm">
            <div class="form-group">
                <div>
                    <span>Email Address*</span>
                    <input type="text" class="form-control" value="{{emailAddress}}" readonly formControlName="EmailAddress" />
                </div>
                <div>
                    <span>Old Password*</span>
                    <input type="password" class="form-control" value="{{password}}" readonly formControlName="OldPassword" />
                </div>
                <div>
                    <span>New Password*</span>
                    <input type="password" class="form-control" placeholder="New Password" formControlName="NewPassword" …

Angular Material 表利用 MatTableDataSource 方法来sortData()对表的数据源进行排序。（https://material.angular.io/components/table/api#MatTableDataSource）。它是一个箭头函数：

sortData: ((data: T[], sort: MatSort) => T[])

我需要查看排序后的数据而不实际更改排序。例如，

this.dataSource.sortData = (sortData) => {
    console.log(sortData);
    return sortData;
};

这里的问题是我重写了本机排序功能。return sortData返回原始数据，不进行任何排序。我想做的就是观察排序后的数据而不修改它。是否有可能做到这一点？

我想通过按 Enter 键来提交表单，而不是在编辑任何字段并启用更新按钮后单击更新按钮，如下截图所示。

此更新表单是一个对话框，单击表行上的编辑功能即可打开该对话框。

案例：现在表单已在Emp Code字段中编辑并突出显示，因此单击 Enter 键后应提交此表单。

下面是 HTML 中更新表单的代码示例。

<mat-card-content>
    <form class="example-form" [formGroup]="docForm">
      <table>
        <tr>
          .
          .
          <td>
            <mat-form-field appearance="outline">
              <mat-label>Emp Code</mat-label>
              <input matInput name="empCode" formControlName="empCd" maxLength = "4" >
            </mat-form-field>
          </td>
         .
         .
       </tr>
      </table>
    </form>
</mat-card-content>

<button mat-raised-button style="width: 95px;" color="primary" [disabled]='docForm.invalid || !docForm.dirty (click)="update()"> Update </button>

我尝试了一些方法，但没有按预期工作。

 <button mat-raised-button (keyup.enter)="!($event.target.tagName == 'TEXTAREA' || $event.target.tagName == 'BUTTON')" 
  style="width: 95px;" color="primary" [disabled]='docForm.invalid || !docForm.dirty' (click)="update()"> Update </button>

预先感谢您对此的任何帮助。

我想用 mat-checkbox 附加我的状态字段，并希望以字符串的形式获取值，就像我们用来获取 Material-1 一样。

我正在寻找ng-true-value="'ACTIVE'" ng-false-value="'INACTIVE'"Material-7 中的替代品。

我有一个容器，里面有一个元素。我希望能够将元素拖动到容器内的另一个位置，并查看新的x和y坐标（其中x = 0和y = 0是容器的左上角）。

我在https://stackblitz.com/edit/material-6-mjrhg1上设置了一个基本的stackblitz ，但它不会在控制台中显示整个事件对象（“对象太大”）。在我的实际应用程序中，我可以浏览整个事件对象，但找不到描述新x和y位置的任何属性。

基本设置是这样的：

<div style="height: 200px; width=200px; background-color: yellow" class="container">
  <div 
    style="height: 20px; width: 20px; background-color: red; z-index: 10" 
    cdkDrag 
    cdkDragBoundary=".container"
    (cdkDragEnded)="onDragEnded($event)">
  </div>
</div>

我也尝试了其他一些事件，但是cdkDragEnded对我来说最有意义。

任何想法要检查哪些属性以查找x和y坐标，还是应该使用其他事件/方法？

每次单击Modal Button我都会收到以下错误。

UserProfileDialog 是我的对话框组件，

Error: StaticInjectorError(AppModule)[UserProfileDialog -> InjectionToken MatDialogData]:    StaticInjectorError(Platform: core)[UserProfileDialog -> InjectionToken MatDialogData]:      NullInjectorError: No provider for InjectionToken MatDialogData!     at NullInjector.push../node_modules/@angular/

我在这里尝试了所有相关的解决方案，但没有一个工作正常。

dashboard.component.ts 这是我有一个列出所有用户的表格，点击一行上的按钮，它应该显示该用户的完整个人资料

 viewUserProfile(userId: string){
    const dialogRef = this.dialog.open(UserProfileDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

@Component({
  selector: 'user-profile-dialog',
  templateUrl: './user-profile.component.html',
  // styleUrls: ['./dashboard.component.scss']
})
export class UserProfileDialog {

  constructor(
    public dialogRef: MatDialogRef<UserProfileDialog>,
    @Inject({'data':'MAT_DIALOG_DATA'}) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

app.module.ts

import { FileSelectDirective } from 'ng2-file-upload';
import { BsDropdownModule } …

我想在我用 Angular 7 和材料设计显示的列表上有一个悬停颜色。由于$primary,$accent和$warn颜色不能很好地用于此目的，因此我想获得与悬停时按钮具有的悬停颜色相同的颜色。我目前正在使用material design multiple-themes example 中的 candy-app-theme 和 dark-theme ，所以我没有自己定义这种颜色。

但是，为了定义我的悬停颜色，我需要查询此按钮悬停颜色。因此：如何查询此颜色？

@mixin options-component-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.

    //i have tried these two:
    $hover: map-get($theme, hover);
    $focused-button: map-get($theme, focused-button);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);

    .listItemFormat:hover {
    background-color: $focused-button;

}

我试图通过hoverand获取颜色focused-button，如 TimTheEnchanter 在这个答案中列出的那样，但是这不起作用（我最终没有任何可见的悬停效果）。

我想在一行中有 2 个表单输入字段：1. 第一个有固定的，1. 第二个应该增长和缩小，但这不会缩小到 180px 以下。

这是一个完整的堆栈闪电战示例

当您启动应用程序时，我们会看到这一点

有可能另一个问题：
我认为第二个输入字段应该已经显示提示文字和水平线-但它只会显示它时，它得到的焦点。
这是预期的行为还是我错过了什么？

反正。主要问题是第二个字段没有按预期缩小。它不会缩小到 180 像素以下：

在 chrome dev-tool 中，我可以看到input元素用 a 包裹，div class="mat-form-field-infix">并且类mat-form-field-infix的宽度固定为 180px！

我想出的唯一解决方法是使用 using 覆盖此宽度::ng-deep。
您可以在 Stackblitz 示例的co-input-field.component.scss文件中激活它

:host ::ng-deep .mat-form-field-infix {
  // width: auto !important;
  width: unset !important;
}

使用此解决方法，第二个输入会按预期缩小：

但是::ng-deep 已被弃用并将被删除。
那么使输入按预期缩小的正确方法是什么？

我很熟悉这个错误,但我在更新到Angular Material 6.4.7之后才开始看到这个.

我的所有模块都引用了我自己的MaterialModule,它导出了MatDialogModule.我没有MatDialogRef的任何提供程序设置 - 以前不需要.

和[MatDialogTitle - > MatDialogRef]的交易是什么？那是什么意思？

在dev和prod版本中,一切似乎都运行良好.我无法弄清楚造成这种情况的原因.

有没有办法追溯到某事？

谢谢

core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken …