标签: angular4-forms

我正在尝试创建带有一些附加属性的 FormControl 子类，然后可以在自定义表单控件中使用这些属性来更改行为。

我尝试继承 FormControl（例如 StandardFormControl），如下所示，并用于创建表单组，但是当我在指令/其他任何地方访问表单控件时，我没有获得子类表单控件的属性。

class StandardFormControl extends FormControl{
   customProperty: string
}

表单组创建如下

new FormGroup({
  firstName: new StandardFormControl('',[])
});

有人有什么想法吗？

我正在使用有角4形式，我有一些领域。和first_name，last_name和company对我来说真的很重要。我想强迫用户填写这三个字段之一。我该怎么做？

这是.ts代码：

this.contactForm = this.fb.group({
        first_name: [null, Validators.compose([Validators.required])],
        last_name: [null, Validators.compose([Validators.required])],
        email: [null, Validators.compose([this.validateEmail])],
        company: [null],
        position: [null],
      });

一个html：

 <form [formGroup]="contactForm" fxLayout="column">
            <md-input-container class="data_light">
              <input class="data_font capital" mdInput placeholder="{{'Contacts.FirstName' | translate}}" [formControl]="contactForm.controls['first_name']">
            </md-input-container>
            <small *ngIf="contactForm.controls['first_name'].hasError('required') && contactForm.controls['first_name'].touched" class="mat-text-warn data_light">{{'Contacts.firstNameReq' | translate}}
            </small>
            <md-input-container class="data_light">
              <input class="data_font capital" mdInput placeholder="{{'Contacts.lastName' | translate}}" [formControl]="contactForm.controls['last_name']">
            </md-input-container>
            <small *ngIf="contactForm.controls['last_name'].hasError('required') && contactForm.controls['last_name'].touched" class="mat-text-warn data_light">{{'Contacts.lastNameReq' | translate}}
            </small>
            <md-input-container class="data_light">
              <input class="data_font" mdInput placeholder="{{'Contacts.email' | translate}}" [formControl]="contactForm.controls['email']"
                (blur)="checkContactEmail()">
            </md-input-container>
            <small *ngIf="contactForm.controls['email'].hasError('validateEmail') && contactForm.controls['email'].dirty" class="mat-text-warn data_light">{{'Contacts.emailValid' …

我正在使用 angular cli、angular 4 和 angular material 2。我需要禁用 chrome 自动完成功能，但我无法这样做。

我已经搜索并发现我需要在表单和输入中添加 autocomplete=off 或 autocomplete=false 。我还通过添加 type="search" 找到了一种解决方法。它们似乎都不起作用。

材料或角度是否覆盖此说明？

我正在使用反应形式！

有什么建议吗？

在此先感谢您的帮助

当我在下面的 matAutocomplete formControl 中选择一个项目时，我总是得到 ID，而不是下拉列表中显示的值。

当我将 [value]="baseCoin.ID" 更改为 [value]="baseCoin.Abbr" 时，当我选择一个项目时会显示正确的字符串，但是，我需要 (ngModelChange) 事件将 baseCoin.ID 返回到一个方法，而不是 baseCoin.Abbr。

<mat-form-field>
    <input matInput placeholder="Base Coin" aria-label="Base Coin" [matAutocomplete]="basecoin" [formControl]="baseCoinCtrl" [(ngModel)]="newTrade.BaseCoin.Abbr" (ngModelChange)="populateMarketCoins( $event )">
    <mat-autocomplete #basecoin="matAutocomplete">
        <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin.Abbr">
            {{baseCoin.Abbr | uppercase}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

我错过了什么吗？

帮助表示赞赏。谢谢。

我是 Angular 4 的新手。我正在使用 Angular 4 进行分页。我安装了“npm install ngx-pagination --save”。我按照互联网上的说明进行操作。但我收到类似“无法找到管道‘分页’的错误（”]game of games | paginate: { itemsPerPage: 2, currentPage: p }"> {{i}} ”）：ng:///ActivityChartModule /ActivityComponent.html@235:32 'pagination-controls' 不是已知元素：“。我尝试了更多。任何人都可以帮助我解决这个问题。下面是我的代码，

app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]

in component.ts
p: number = 1;


    games = [
        {
            "id": "1",
            "name": "DOTA 2",
            "genre": "Strategy"
        },
        {
            "id": "2",
            "name": "AOE 3",
            "genre": "Strategy"
        },
        {
            "id": "3",
            "name": "GTA 5",
            "genre": "RPG"
        },
        {
            "id": "4",
            "name": "Far Cry 3",
            "genre": "Action"
        },
        {
            "id": …

我正在创建一个动态表单，根据来自 JSON 之类的响应动态填充字段。

例如：-

[{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"fname",
  "visibility":true
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"lname",
  "visibility":"fname == 'abc' || fname == 'xyz'"
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"fid",
  "visibility":true
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"lid",
  "visibility":"fid == 1 || fid == 4"
}]

我有一个用例，只有当第一个字段的值应该为“abc”或“xyz”时，第二个字段才应该可见（条件写在 JSON 属性中）。如何动态实现？

我想禁用所有以前/过去的日期ngbDatepicker，我已经使用ngbDatepicker。
我的HTML是：

<input required class="form-control" placeholder="dd-MM-YYYY" name="startDate" required ngbDatepicker #d="ngbDatepicker"
            [readonly]="true" [formControl]="formModel.controls.startDate" [ngClass]="{'has-error':!formModel.controls['startDate'].valid && formModel.controls['startDate'].touched}" />

错误图像：

 <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'">
                    <div class="pb-1">
                            <md2-select placeholder="{{'WidgetType'|translate:lang}}" class="input_custom_width"(change)="widgetNode($event.value)"  required>
                                <md2-option *ngFor="let widgetType of widgetTypeAry" [value]="widgetType.value">
                                    {{widgetType.name}}
                                </md2-option>
                            </md2-select>
                    </div>
                </div>
              <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="fieldsObj['node'] && showRequestAction" >
                <div class="pb-1">
                    <md2-select placeholder="{{'Node'|translate:lang}}" [formControl]="editWidgetForm.controls['nodeId']" [(ngModel)]="nodeId" class="input_custom_width" [(multiple)]="isMultiNode" (change)="nodeChange($event.value)" required>
                        <md2-select-header>
                            <md-input-container class="input_custom_width">
                                <input mdInput type="text" placeholder="{{'Search'| translate:lang}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchNode"/>
                            </md-input-container>
                        </md2-select-header>
                        <md2-option *ngFor="let node of nodesAry | filterPipe : searchNode" [value]="node.value">
                            {{ node.name }}
                        </md2-option>
                    </md2-select>
                    <small *ngIf="editWidgetForm.controls['nodeId'].hasError('required') && editWidgetForm.controls['nodeId'].touched" class="mat-text-warn">{{'nodeReq'|translate:lang}}</small>
                </div>
              </div>

当我在 select 下拉列表中使用 multiple …

在此演示中，我为自定义验证器创建了一个示例表单，这里有“起始日期”和“截止日期”以及“起始时间”和“截止时间”，工作正常：对于“起始日期”和“截止日期”验证工作正常并显示错误消息。

问题：当选择相同的日期时，例如）2018 年 7 月 21 日作为起始日期，并且“To date e”和“In from Time”为 4:00 AM，“To Time”为 3:00AM，条件得到满足，但没有显示错误消息。在实施过程中出现了一些问题，任何人都可以帮我解决吗？

在 html 中，我给出了验证消息，但没有显示。

To Time:
<input type="time" formControlName="ToTime">
    <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>

在组件中：

 DaterForm : FormGroup;

constructor(private fb:FormBuilder){
}
   ngOnInit(){

 this.DaterForm = this.fb.group(
{
  FromDate:['',[AppCustomDirective.fromDateValidator]], // validation working fine
  FromTime:[''],
  ToDate:['',[AppCustomDirective.ToDateValidator]],// validation working fine
  ToTime:['']
},{validator:[AppCustomDirective.timeValidator] // validation not working
}

自定义验证：

import { AbstractControl, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

export class AppCustomDirective …

我创建了一个类，其中包含我的应用程序的所有自定义验证。只是想知道这是否是正确的方法。我在网上看到了一些例子并想出了这段代码。每个方法都必须是静态的吗？如果我删除静态密钥工作，我会收到编译错误。

import { FormControl, ValidatorFn } from '@angular/forms';

export class FormValidator {

     static validategreater(maxVal, minVal): ValidatorFn {
    return (control: FormControl) => {
      if (control.dirty) {

          if (enteredValue > maxVal) {
            returnObj['greaterError'] = true;
          }
       if (Object.keys(returnObj).length > 0) {
          return returnObj;
        }
      }
      return null;
    };
  }

}