标签: angular2-forms

我在 Angular2 中开发了一个使用 form 标签的页面，并且在 table 标签中使用 ngFor 渲染了输入控件。

我创建了模型（DataModal）来表示表的每一行。我创建了模型列表（DataModalList），并通过单击按钮（addNewRow）不断将每个模型添加到其中

我面临添加新行时删除选定输入值的问题。\n当我删除表单标签时一切正常\n我需要表单标签来执行验证。

请找到下面的代码：

模型：

import {DropDownModel} from \'../models/dropDownModel\';\xc2\xa0\nexport class DataModal {\n  dropdown: DropDownModel[];\n  selectedValue: string;\n  constructor() {\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0  \xc2\xa0\xc2\xa0\xc2\xa0 \n          this.selectedValue = "0";\xc2\xa0\xc2\xa0\n      }\n }\n

成分：

addNewRow() {\xc2\xa0\n    let dataModal = new DataModal();\n    dataModal.dropdown = response; //values are coming from api\n    this.DataModalList.push(dataModal);\n}\n

网页：

<form novalidate #form="ngForm" (ngSubmit)="submitEditForm(form.valid)">\n    <table>\n        <tr *ngFor="let item of DataModalList;let i= index ">\n            <td class="col-md-3">\n                <div>\n                    <label class="control-label" …

我的 Angular 2 应用程序使用反应形式。

FormGroup我在我的组件之一中初始化以下内容：

  ngOnInit() {\n    ...\n\n    this.addressForm = this.formBuilder.group({\n      address: this.formBuilder.control({\n        placeId: this.address.placeId,\n        description: this.address.description\n      }, addressValidator)\n    });\n  }\n

这是 的定义addressValidator：

import {AbstractControl} from \'@angular/forms\';\n\nexport function addressValidator(control: AbstractControl) {\n\n  const {placeId} = control.value;\n\n  return (placeId !== undefined && placeId !== null && placeId !== \'\') ? null : {addressValidator: {emptyPlaceId: true}};\n}\n

以下是我尝试检查表单控件 ie 是否address有错误的方法：

  addressFormErrors(error: string) {\n    return this.addressForm.hasError(error, [\'address\', \'addressValidator\']);\n  }\n

这是调用 addressFormErrors 方法的模板：

我创建了一个包含表单的自定义组件<address></address>。我有一个父组件，其中包含以下数组：

@ViewChildren(AddressComponent) addressComponents: QueryList<AddressComponent>;

因此，父级可以包含这些元素的集合，并且用户可以根据他们将输入的地址数量添加和删除它们。

家长还有一个按钮，可以在用户输入所有所需的地址后继续。但是，该<address>组件必须正确填写<address>，因此我在该组件上有一个公共 getter ：

get valid(): boolen {
  return this._form.valid;
}

回到父级上的按钮。<address>如果任何组件无效，则需要禁用它。所以我写了以下内容：

get allValid() {
   return this.addressComponents && this.addressComponents.toArray().every(component => component.valid);
}

在父模板中：

<button [disabled]="!allValid" (click)="nextPage()">Proceed</button>

但 Angular 不喜欢这样，因为addressComponents直到生命周期事件才在父级中定义ngAfterViewInit。由于它立即运行，ngOnViewInit()我得到了导致错误的表达式检查的两个不同值。（至少我认为是这样）。

如何在模板中使用依赖于 的属性ngAfterViewInit？或者告诉我的父母其所有孩子都是有效的最好方法是什么？

错误消息：

检查后表情发生了变化。以前的值：“假”。当前值：“真”

更新：

所以我console.log编辑了 的返回值allValid并第一次注意到它是undefined。这是预料之中的，this.addressComponents直到。这是下一个日志，这令人惊讶，因为我的页面上还没有任何组件。我正在父组件中使用模拟数据（尽管全部有效）来创建组件。我确实了解到（在空数组上返回 true）。所以对 的第三次调用正在返回。我再次感到有点惊讶，因为我的所有数据都是有效的。在第四条日志中，它返回了，这正是我所期望的。所以我假设返回的最终值是 Angular 不喜欢的。undefined …

我是 Angular 2 的新手，这里显示了将显示我的 url 的路由器代码。 现在路由器代码 ，当我运行该代码时，网址看起来像这样..

本地主机:50465/促销%3Fid%3D/51059

在该网址中显示％3F而不是问号（？）和％3D而不是等于（=）。展示如何显示我的原始网址。我的代码看起来像那样。

我想这样输出： http://localhost:50465/promotion?id=132

如何才能实现这一点，请帮助我。

请帮我..！！

我有一个来自 control 的自定义选择器app-date-picker。它实现了ControlValueAccessor. 我有一个名为的组件MyPage，其中包含此自定义表单控件：

<app-date-picker class="address__from-date" [(ngModel)]="fromDate"></app-date-picker>

我正在尝试编写一个单元测试来MyPage测试绑定的两个方向。我已经对其他表单字段执行了此操作，效果很好，例如：

it('should bind zip code', fakeAsync(() => {
  const formControl = element.query(By.css('.address__zip-code input')).nativeElement;

  // model -> view
  component.zipCode = 76777;
  fixture.detectChanges();
  tick();

  expect(formControl.value).toEqual('76777');

  // view -> model
  formControl.value = '89556';
  formControl.dispatchEvent(new Event('input'));

  expect(component.zipCode).toEqual(89556);
}));

当我尝试为自定义表单控件执行此操作时，出现了问题。到目前为止，我只能测试一个绑定方向，即使如此，它也需要使用ng-reflect-model，这太糟糕了：

it('should bind from-date', fakeAsync(() => {
  const formControl = element.query(By.css('.address__from-date app-date-picker')).nativeElement;

  // model -> view
  component.fromDate = '01/2017';
  fixture.detectChanges();
  tick();

  expect(formControl.attributes['ng-reflect-model'].value).toEqual('01/2017');

  // view -> model
  // Not sure …

我的 HTML 代码：

 <div class="dropdown-menu dropdown-menu-right filter-dropdown-menu  row">
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(0)" name="gender" value="male"> Admin
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(1)" name="gender" value="male"> Manager
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(2)" name="gender" value="male"> Member<br>

 </div>

重置 HTML 代码：

<div class="btn btn-primary btn-reset" (click)="reset_filter()">Reset</div>

我的 ts 重置代码：

reset_filter() {
this.filter_source_type_value =null;
}

我正在使用反应式表单。当输入状态无效时，我会显示错误。这是我的观点：

<div class="form-group">
    <label for="username">Username</label>
    <input name="username"
           type="text"
           class="form-control"
           id="username"
           formControlName="username"
           #username/>
    <div class="alert alert-danger"
         *ngIf="formDir.form.controls.username.touched && 
                formDir.form.controls.username.invalid">
        This field is required.
    </div>
</div>

<div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           id="password"
           class="form-control"
           name="password" />
</div>

<pre>{{myForm.value | json}}</pre>
<button class="btn btn-primary" type="submit">Sign in</button>

每次我想使用 ngIf 显示验证错误时，我都必须编写这个笨拙的代码：

*ngIf="formDir.form.controls.username.touched && 
       formDir.form.controls.username.invalid">

当你有更多的对象需要验证时，它会成为更大的迫害者。

通过关注 angular.io 上的文档和这个示例，我找到了一个解决方案，但我必须为我想要在视图中访问它的每个表单控件创建一个实例。

我正在寻找一种解决方案，例如我们可以在模板驱动验证中使用的解决方案，使用临时变量和 ngModel，如下所示：

<input type="text" class="form-control" name="username" #username="ngModel">
<div *ngIf="username.touched && username.invalid" class="alert alert- 
danger">Email is required</div> 

据我从这个链接了解到，没有办法实现这一点，但这个链接是旧的，它可能在新版本的角度中存在解决方案。

你能帮助我吗？

谢谢

现在，我正在使用 primeng 自动完成下拉菜单，在此我们没有清除/重置功能。

当我从下拉列表中选择结果时，输入中应出现一个清除/重置图标 (x)，单击 (x) 将清除输入框。

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
            [dropdown]="true"></p-autoComplete>

任何人对此有任何更好的解决方案。

我有一个 primeNG 自动完成组件，如果未找到键入的搜索词，则需要运行一些代码。目前我在 onBlur 事件的处理程序中有这段代码。

我遇到的问题是根据https://github.com/primefaces/primeng/issues/4403 Prime Faces 将下拉列表上的单击视为新元素上的单击，从而使 onBlur 在用户实际离开之前触发元素。

不确定他们这样做的原因是什么，但在我看来，正因为如此，当他们离开组件时，我无法捕获真正的不匹配搜索的价值。还有其他方法可以实现此目的吗？

我有一个表单来更新客户对象.

我有一个客户类型的选择,我想在获得客户数据时预先选择当前值.我怎样才能做到这一点 ？

这是我的html表单的一部分:

<div class="form-group">
    <label for="type" class="req">Type</label>
    <select class="form-control" ngControl="type">
        <option *ngFor="#p of typecustomerlist" [value]="p.code">{{p.label}}</option>
    </select>
    <div [hidden]="type.valid" class="alert alert-danger">
        Please select a type
    </div>
</div>
<div class="form-group">
    <label for="lastname" class="req">Last name</label>
    <input type="text" ngControl="lastname" value="{{customer.Lastname}}" />
    <div *ngIf="lastname.dirty && !lastname.valid" class="alert alert-danger">
        <p *ngIf="lastname.errors.required">Lastname is required.</p>
    </div>
</div>