标签: angular5

我正在尝试以 angular 5 反应形式捕获 FormArray 控件的 valueChanges 事件。我有正常的表单组 valueChanges 事件和相同的工作正常但不适用于 formArray 控件。

我已将我的表单组定义为 -

this.ApplicationForm = this.fb.group({
  ApplicationPenalties: this.fb.array([this.preparePenaltyDetails()])
});

并初始化表单数组如下 -

preparePenaltyDetails(): FormGroup {
    return this.fb.group({
      Id: '',
      ApplicationId: '',
      RevisionNo: '',
      PenaltyMwh: ''
    });
  }

当我从我的 api 获取数据时，我将控件设置为 -

this.ApplicationForm.setControl('ApplicationPenalties', this.fb.array(this.application.ApplicationPenalties
              .map(x => this.fb.group(x)) || []));

我的 html 模板如下 -

<div formArrayName="ApplicationPenalties" *ngFor="let penalty of ApplicationPenalties.controls; let i=index">
                    <div [formGroupName]="i">
                      <div class="row pocCharges">
                        <div class="col-md-6">
                          <div class="form-group">
                            <h4 class="d-sm-block">Revision Number</h4>
                            <div class="input-group">
                              <input class="form-control form-control-sm" formControlName="RevisionNo" type="text">
                              <span …

我正在尝试让步进器根据用户停止的位置转到一组问题。我正在使用 selectedIndex，并将其设置为我从服务器检索到的数字。

网址：

  <mat-horizontal-stepper class="my-stepper" [linear]="true" #stepper="matHorizontalStepper" [selectedIndex]="currentQuestion">
    <mat-step *ngFor="let question of currentVideoCount">
      <ng-template matStepLabel>Question {{question}}</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

打字稿：

  public currentVideoCount: number[];
  public currentQuestion: number;
ngAfterViewInit() {
    this.programId.subscribe((programId) => {
      this.evalService.getCurrentVideoCount(programId).subscribe(data => {
        this.currentVideoCount = data.videoCount;
        this.currentQuestion = data.question;
      });
    })
  }

这不起作用。如果我这样做，我会收到此错误。

ERROR Error: cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.

但是，如果我只是将 html 更改为不使用 currentQuestion，而只使用一个数字或一个我定义为 1、2 等的变量，它确实可以工作。如果我只是将 currentQuestion 放在 html 标签中，它会给我正确的数字。如果我在任何地方记录它，它会给我正确的数字。但是步进器本身不会使用该数字，并且仅当以这种方式为其提供数字时。如何让它对 selectedIndex 使用 currentQuestion？我认为它出错了，因为我在订阅中定义它的方式，但我不知道如何解决这个问题。

编辑：如果我将 currentQuestion 初始化为我期望 data.question 的数字，它可以工作，但如果我将它初始化为其他东西，则无效。显然不是我想要的，但仍然很有趣。

编辑：如果我默认将 selectedIndex 设置为超出范围，例如 3 个项目的数组中的 300 个，我不会收到超出范围的错误，它只会使整个步进器变灰。

使用角度材料 mat-table 时是否可以将特定数据行滚动到视图中cdk-table？

我试图在没有运气的情况下实现键盘滚动。

如果我的 FormGroup 的字段是模型绑定的，ala [(ngModel)]，并且在页面加载时填充，例如由于服务，我的提交按钮，它被保护为[disabled]="biodataForm.status !== 'VALID'"，不会被禁用。如果表格出现空白并且我正常填写，那么当表格正确填写时，警卫会通过。如果通过数据绑定填充了相同的确切值，则 biodataForm.status 值将保持无效，直到我更改每个字段的值。

我的感觉是，在填充数据绑定后，表单应该识别出它具有有效内容，因此它的状态应该从 INVALID 更改为 VALID ......这里出了什么问题？

我的表单标记如下所示：

  <form class="form" name="biodataForm" [formGroup]="biodataForm">
    <mat-form-field class="full-width">
      <input matInput placeholder="First Name" 
        required
        [(ngModel)]="_memberdata.firstname"
        [formControl]="firstnameFormControl">
      <mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>        
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Last Name" 
        required
        [(ngModel)]="_memberdata.lastname"
        [formControl]="lastnameFormControl">
      <mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>                
    </mat-form-field>
    <mat-form-field class="full-width"
      hintLabel="Note: We'll send you an email with a link to click to prove it's you">
      <input matInput placeholder="Email" 
        required
        [(value)]="_memberdata.email"
        [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>        
    </mat-form-field>    
    <mat-form-field class="full-width">
      <input matInput placeholder="Phone" type="tel" 
        [(value)]="_memberdata.phone"
        required …

我正在使用 angular 5 示例项目，想要使用 angular5 组件结构为屏幕截图或捕获屏幕视频构建功能。

我在我的 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 文件。

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