小编azu*_*net的帖子

我有一个用于动态创建表单的 Angular 7 项目。我有一个父 FormGroup，其中包含各种类型的嵌套 FormGroup。

我希望 ParentForm 无效，直到所有嵌套/子表单都有效（实际上希望它们提交但尚未到达）。

  this.parentForm = new FormGroup(this.subforms, { validators: allSubModulesValidValidator }); 

this.subforms 是一个像这样的对象：

interface DynamicKeyFormGroup {
  [key: string]: FormGroup;
}

subforms: DynamicKeyFormGroup = {};

我知道我的验证器是错误的，但我不知道如何为 FormGroup 和 FormControl 设计验证器。

我的想法是，我试图循环遍历所有 this.subForms 的属性（即嵌套的 FormGroups），然后检查它们的状态。如果有无效的，则将parentForm标记为无效。

const allSubModulesValidValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const controls = control.controls;
  for (const key in controls) {
    if (controls.hasOwnProperty(key)) {
      if (!(controls[key].status === 'valid')) {
        return { 'allSubModulesValid': true };
      }
    }
  }
  return null;
};

回应评论。删除验证器后，父级有效，而子级无效：

我尝试了这个黑客:https://github.com/Microsoft/TypeScript/issues/14529但是遇到了其他可怕的错误,所以我认为它不起作用.

这里的选项不提供2.2:https://www.microsoft.com/en-us/download/details.aspx？id = 55258

"Install-Package Microsoft.TypeScript.MSBuild -Version 2.2.2"也不起作用,使2.2显示在下拉列表中但仅作为不可用.https://www.nuget.org/packages/Microsoft.TypeScript.MSBuild/2.2.2

我想认真地遵循公认的答案此.我正在为我的大多数软件包使用Knockout,Typescript,MVC,VS2017和节点模块.我遇到的问题是绑定不会被调用,但没有任何构建错误.

提供定义文件(比如myBindings.d.ts)

添加以下代码

  interface KnockoutBindingHandlers {
        csharpTypes: KnockoutBindingHandler;
    }

Run Code Online (Sandbox Code Playgroud)

在extensions.ts文件中引用此定义文件

因此我创建了customKoBindings.d.ts这样的.

/// <reference path="../../node_modules/@types/knockout/index.d.ts" />

interface KnockoutBindingHandlers {
    dataTablesForEach: KnockoutBindingHandler;
}

我尝试在我的cshtml中应用绑定.我是否需要以某种方式将ko.bindingHandler拉入我的ViewModel才能使其可用于视图？

<table style="width: 100%" id="copyEmpTrainingSearchResultsTable" class="display" cellspacing="0">
                                                <thead>
                                                    <tr>
                                                        <th data-bind="sort: { arr: employees, prop: 'firstName' }">First Name</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'lastName' }">Last Name</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'jobTitle' }">Job Title</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'primaryManager' }">Manager</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'department' }">Department</th>
                                                        <th>Trainings</th>
                                                    </tr>
                                                </thead> …

更新：当我意识到 PrimeNg 有一个 quill 实现并且我已经在使用 PrimeNg 时，我放弃了。一开始无法正常工作，但升级到 angular 7 和 ngrx 7 beta 修复了问题。https://www.primefaces.org/primeng/#/editor

我正在尝试使用比默认工具栏更完整的工具栏在我的项目中设置 ngx-quill 文本编辑器。我只是从文档中复制了这个代码片段并且还没有调整（还没有！）。

如果我不包含 modules 属性，我不会收到任何浏览器错误，但我想知道是否存在仅在我尝试添加时才显示的导入问题？

说明.html

 <quill-editor modules="editorOptions"></quill-editor>

说明.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
  import * as Quill from 'quill';

@Component({
    selector: 'instructions',
    templateUrl: '../admin/instructions.html'
})

export class Instructions {
    public editorOptions = {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ …

我有一个 PrimeNg p 表，我需要根据用户设置默认过滤，所以我想我需要使用类似“ let table = document.getElementById("dt");Where table is 无论 primeNg 的表对象是什么”之类的东西，这样我就可以table.filter(filterDefault, col.field, 'in');像 html 中所做的那样进行调用。我只是不知道如何将#dt我的打字稿作为正确的类型进行转换，或者也许有一种更简单的方法可以使用 p 表已有的内容来完成此操作。

         <p-table #dt>
                ...
                  <tr>
                    <th *ngFor="let col of columns" [ngSwitch]="col.filterType" class=showOverflow pResizableColumn>
                      ...

                      <p-multiSelect *ngSwitchCase="'DropDown'" [options]="masterSearchTypes" defaultLabel="All"
                        [(ngModel)]="filterDefault" (onChange)="dt.filter($event.value, col.field, 'in' )"></p-multiSelect>

                    </th>
                  </tr>
                  ...
              </p-table>

选中框并选择 sans 图标。

我已经添加了primeicons库：https : //github.com/primefaces/primeng/wiki/Migration-Guide

但是，有些事情仍然很糟糕，我无法显示带有图标的图标。

包.json：

...
"primeicons": "^1.0.0-beta.10",
"primeng": "6.1.2",

也有，不确定是否相关。似乎没有覆盖 css 但可能

"font-awesome": "4.7.0",
"@angular/material": "^6.4.7",

html：

<p-checkbox binary="true" label="Match Note"></p-checkbox>

html 显示图标类 - 来自开发工具：

<span class="ui-chkbox-icon ui-clickable pi pi-check" ng-reflect-klass="ui-chkbox-icon ui-clickable" ng-reflect-ng-class="[object Object]"></span>

css - 来自开发工具：

.ui-chkbox .ui-chkbox-icon {
    display: block;
}
<style>…</style>
.ui-widget, .ui-widget * {
    box-sizing: border-box;
}
<style>…</style>
*, *::before, *::after {
    box-sizing: border-box;
}
<style>…</style>
.ui-chkbox .ui-chkbox-box {
    width: 1.125em;
    height: 1.125em;
    line-height: 1.125em;
    border-radius: 2px;
    text-align: center;
}
<style>…</style> …

在手风琴内部，我有一个带有 2 列（实际上更多，但为了简单起见）的网格，它们的长度都是可变的（动态表单创建器）。在左栏中，我有一些按钮，当向下滚动右栏时，我想留在屏幕上。css网格或扩展面板是否与粘性相矛盾？我试图找到隐藏的溢出，因为我读到你不能这样做，但我没有找到。你看到我遗漏了什么以及为什么我的粘性没有留下吗？

.html

...
<mat-expansion-panel>
   <mat-expansion-panel-header>
        Header
   </mat-expansion-panel-header>
   <div class="grid">
        <div id="left">
           <div class=sticky>
              stay on screen
           </div>
        </div>
        <div id="right">
              some other really long content
        </div>                      
    </div>
    </mat-expansion-panel>
</mat-accordion>
...

.css

.sticky {
    position: sticky;
    top:0;
}

.grid {
    display: grid;
    grid-template-columns: 2fr 8fr;
}

我想使用primeNg p 表来显示对象而不是数组的一些属性，同时保持主要样式。

这样，正文根本不会显示，而标题会显示。我不想仅仅为了满足 primeng 而将单个对象放入数组中。

  <p-table [responsive]="true">
    <ng-template pTemplate="header">
      <tr>
        <th>
          Lot Start Date
        </th>
        <th>
          Expiration Date
        </th>
        <th>
          Quantity
        </th>
      </tr>
    </ng-template>
    <tr>
      <td>10/12/19</td>
      <td>12/12/19</td>
      <td>50</td>
    </tr>
  </p-table>