标签: angular5

我希望能够使用组件构建一个响应式表单，而不是将其全部设置在单个父组件中。所以我创建了初始FormGroup并将其传递给组件，然后this.form.addControl(this.fb.group({ ... }));将它们的组添加到表单中。

例子

父组件

this.form = this.fb.group({}); // Empty

public ngAfterViewInit() {
  // Throws error after trying to patchValue on the child component
  this.form.get('example').patchValue({
    field1: 'Hello World!'
  });
}

子组件

this.parentFormGroup.addControl(
  'childGroup', 
  this.fb.group({ 
    field1: [
      '', [Validators.required]
    ], 
    etc...
  }
);

这一直有效，直到我尝试并this.form.get('childGroup').patchValue({ ... })在ngAfterViewInit父组件的生命周期挂钩中发出请求之后。它没有修补组，而是抛出：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'ng-valid: false'. Current value: 
'ng-valid: true'.

有没有办法让子组件将自己添加到 a FormGroup，而不是让父组件设置FormGroup控件和验证。我们需要在应用程序中以不同的方式和组合重用子组件，因此不想FormGroup在子组件之外不断重复声明，但这似乎不起作用。

我正在学习使用yarn link来处理一个包，并在主机应用程序中反映了更改，我要么没有得到某些东西，要么某些东西不起作用。

它全部内置于 angular5..

我有一个包含，除其他外，一个应用程序MyApp的@org/my-package在node_modules。

我需要对 my-package 进行更改，以便为我yarn link用来创建符号链接和在 MyApp 中测试包的更改提供服务。

这就是我所做的...

在我的包中，我运行了一个构建。它创建分发文件。然后我 cli 进入 dist 包并运行yarn link.. 这是成功的.. 我得到了yarn link @org/my-package在 MyApp cli 中使用的说明..

然后我转到 MyApp，然后运行yarn link @org/my-package. 这也是成功。。

但是，当我在 my-package 中进行更改并再次运行构建时，它们不会反映在 MyApp 中。

我不明白什么？

我没有错误。

被@org/my-package认为是node_modules在MyApp的应该是有或没有？yarn link在 my-package 中的 dist 上不是要覆盖那个吗？

无论我搜索多少，看起来 yarn 文档都对这个主题有点了解。

我遇到了 ng-template 的问题。

我们通过 ngTemplateOutletContext 在表格组件中传递一些参数，如下所示。我们根据其中包含的数据类型为单元格使用不同的渲染器。注意 cellvalue 参数，因为它是我需要的。

<ng-container *ngIf="useCellRenderer(column, row)">
   <ng-template [ngTemplateOutlet]="column.renderer.templateref" [ngTemplateOutletContext]="{ cellvalue: row[column.attr], rowvalue:row }">
   </ng-template>
</ng-container>

负责渲染的组件的模板如下所示：

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

该模板能够访问 cellvalue 参数并正确调用该函数，但是我想从组件的 TS 访问相同的参数并且似乎无法做到这一点。

到目前为止我尝试过的内容与以下代码段一致

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

  ngAfterViewInit() {
    console.log('ngAfterViewInit', this.templateref.elementRef);
  }

但是在console.log中找不到cellvalue

提前致谢！

我有表单，我想在提交时验证日期字段，我正在使用表单生成器，我该怎么做（角度方式）？另一个问题为什么我看不到日期字段中的值published_date？我试图搜索，但找不到输入日期字段的解决方案。

unamePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
  ngOnInit() {
    this.book = 
      {
        id: 55,
        author_name : "vv",
        published_date :  new Date('01/02/2018'),
        title : "cc"
      };
      
      this.form = this.formBuilder.group({
        title : ['', Validators.required],
        author : ['', Validators.required],
        datePublish: ['', Validators.pattern(this.unamePattern)],
        }
      );
  }

<input 
            [(ngModel)]="book.published_date"
            id="dateOfBirth" 
            class="form-control" 
            placeholder="yyyy-mm-dd" 
            name="dp" 
            ngbDatepicker 
            formControlName="datePublish"
            #dp="ngbDatepicker">
            
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="dp.toggle()" type="button">
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
          </div>

我需要包含在我的项目 sitemap.xml 中。

我知道我需要把它放在哪里。

"apps": [
{
 [...]
  "assets": [
    "assets",
    "favicon.ico",
    "sitemap.xml",
    "robots.txt"
  ],
 [...]
}
]

但不确定如何生成它。我有很多动态的 URL

最好的方法是什么？

我在我的 Angular 5 项目中使用延迟加载，我有一个共享模块，其中导入了所有材料组件，我在其他模块中使用此共享模块作为材料模块。

所有组件在开发模式下都可以正常工作，但是当我为生产进行构建时，它显示的错误'mat-select'不是已知元素，而没有显示任何行号。

我已经在使用角材料的组件和我的app.component.ts文件中导入了共享模块。我到处搜索，但没有运气。

我想为 angular 5 应用程序安装npm bootstrap-select所以我使用 npm 安装了它

npm install bootstrap-select

然后我安装了所需的依赖项：

npm install jquery
npm install popper.js --save

角度cli.json：

 "apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ],
    }
  ],

我的 package.json 是（我从列表中删除了一些包）：

"dependencies": { 
    (...)
    "@ng-bootstrap/ng-bootstrap": "^1.1.0",
    "bootstrap": "^4.1.1",
    "bootstrap-select": "^1.13.2",
    "jquery": "^3.3.1",
    "ng-multiselect-dropdown": "^0.2.1",
    "popper.js": "^1.14.4",
}

在 html 文件中，我添加了代码：

<ng-template #modalWindow let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Options</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">     
    <select id="myspID" #selectPickerRef class="selectpicker …

如何根据另一个字段的值有条件地验证一个字段？这是我尝试过的，但似乎不起作用

this.PDform = _formbuilder.group({
    [...]
    'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ]
    [...]
})

我想输出一个表单，其中一个字段是一个数组，对于数组的每个元素，我需要输出我的输入。

成分：

ngOnInit() {
  const fb = this.fb;
  this.editForm = this.fb.group({
    country: fb.control(null),
    identifiers: this.fb.array([
       this.fb.group({
         codeIdentifier: fb.control(null),
         numIdentifier: fb.control(null),
       })
    ]),
 });
 this.organizationService.getOneById(this.id).subscribe((organization: Organization) => {
    let ids: any[] = [];
    organization.identifiers.forEach(item => {
       let id: any = { "codeIdentifier": "", "numIdentifier": "" };
       id.codeIdentifier = item.typeIdentifier.code;
       id.numIdentifier = item.numIdentifier;
       ids.push(id);
    });
     this.editForm.setControl('identifiers', this.fb.array(ids || []));
 })
}

HTML：

<div [formGroup]="editForm">
  <ng-container formArrayName="identifiers">
    <ng-container *ngFor="let identifier of identifiers.controls; let i=index" [formGroupName]="i">
      <input type="text" formControlName="codeIdentifier">
      <input type="text" formControlName="numIdentifier">
    </ng-container>
  </ng-container> …

我在我的 Web 应用程序中使用 Angular 5，并希望将 style.scss 文件预加载到项目中。该项目也有 angular-cli.json 文件。

呈现的 index.html 文件包含这样的标签：-

<link href="styles.bundle.css" rel="stylesheet">

angular-cli.json 文件如下所示：-

 "styles": [
        "styles.scss"
      ],

我想尝试添加rel="preload"选项以加快页面加载速度并缩小 style.scss 文件。

请建议如何进行这两项更改。