标签: angular2-forms

我正在尝试使用ngModel在Angular 2中创建一个选择组件包装器.一旦选择被更改,事件都会正确触发,但我无法在渲染时设置初始选择.

这是我的组成部分:

@Component({
selector: 'my-dropdown',
inputs: ['selectedItem', 'items', 'label'],
outputs: ['selectedItemChange'],
template: `
<div class="field">
  <label>{{label}}</label>
    <select class="ui search selection dropdown" [ngModel]="selectedItem" (change)="onChange($event.target.value)">
      <option value="" selected>Please Select</option>
      <option *ngFor="#item of items" [value]="item.value">{{item.label}}</option>
    </select>
</div>`
})

export class MyDropdownComponent {

items: DropdownValue[];
selectedItem: DropdownValue;
selectedItemChange: EventEmitter<any> = new EventEmitter();

private onChange(newValue) {

    console.log(newValue);
    this.selectedItem = this.items.find(item => item.value == newValue);
    console.log(this.selectedItem);
    this.selectedItemChange.emit(newValue);
}
}

我在这个视图中使用它:

<my-dropdown [items]="selectItems" [(selectedItem)]="itemToSelect" [label]="'Please Select'"></my-dropdown>

当我itemToSelect在init上设置父组件中的值时,它不会在UI中设置所选的选项值.

我也尝试过使用该ngModelChange事件,但它不会触发更改事件.

我在Angular 2中有一个与自定义ControlGroup一起使用的表单.目前,当我提交表单时,我将以下行的所有数据传递给我的控制器.

(ngSubmit)="updateArtist(artistDetailForm.value)"

问题是,这传递了一个表单的所有值,如果我的表单非常大,这感觉很无用.是否有可能只传递修改后的(脏？)值？

我正在使用一个ngModelGroup指令将几个表单输入组合在一起.

在文档(https://angular.io/docs/ts/latest/api/forms/index/NgModelGroup-directive.html)中,我读到有一个validators: any[]属性.

这是否意味着我可以添加自定义验证器功能,仅验证该功能ngModelGroup？如果是这样,我该如何使用它？

这将是非常棒的,因为我想检查是否至少检查了其中一个复选框ngModelGroup.我无法使用,required因为这意味着所有复选框都是必需的.我在文档中找不到任何相关内容,或者我找错了地方？

有谁知道如何在自定义字段的类中声明ASYNC验证方法？

现在我在方法中有一个同步验证器validate():

@Component({
  selector: 'my-field',
  template: `<p>Some markup</p>`,
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MyFieldComponent), multi: true },
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyFieldComponent), multi: true }
  ]
})
export class MyFieldComponent implements ControlValueAccessor {

  validate(c: FormControl) {
    // return null or error
  }

  // Rest of the code omitted for brevity
  // writeValue(), registerOnChange()...
}

但即使我NG_ASYNC_VALIDATORS使用与上面相同的语法添加到提供程序,它也不会让我声明类似于validateAsync()方法的东西.

除非......两种类型的验证器都以该validate()方法为目标,我需要在此方法中同时执行同步和异步验证,并返回一个大的observable(可能包含多个错误键)？我对此不太确定.

侧面注意:我可以开始工作的是直接在提供者中 …

我想创建包含其他自定义控件的自定义控件,并使用连接所有自定义控件的ngModel.喜欢 :

PersonSearchComponent:

• DeveloperSearchControl
  • 名称 - 一些字符串输入
  • 姓
  • ProffesionSelect - 期望ProffesionModel的自定义控件
• BuildingSearchControl
  • 这里有一些自定义控件
• CountryCustomControl - 期望CountryModel的自定义控件

• PersonListComponent: - 由某些服务导入有关PersonSearchComponent中项目的数据

• SomeOtherSearchComponent
  • DeveloperSearchControl - 可重用

所以现在我有工作版本,但我认为我做了一些坏事(也许我应该使用FormBuilder):

PersonSearch模板:

    <div>
            <developer-search-control [(ngModel)]="searchModel.developerSearchModel"></developer-search-control>
            <building-search-control [(ngModel)]="searchModel.buildingSearchModel"></building-search-control>
            <country-select [(ngModel)]="searchModel.countryModel"><country-select>
    </div>

ParentSearch组件

...
export class PersonSearch {
  @Output() searchDataEmitter= new EventEmitter();//Exports data to above component which contains this, and listComponent
searchModel : PersonSearchModel : new PersonSearchModel();

    performSearch()
    {
        //gets data from service with searchModel and searchDataEmitter transpors it to above component
    }
}

型号:PersonSearchModel:

developerSearchModel : DeveloperSearchModel = …

我想问一下是否有可能将整个物体发送到角度2的反应形式.

这是我的表格:

this.parameterForm = this.fb.group({

  'name': ['', Validators.required],
  'description': "",
  'parameterType':''
});

第三个属性(parameterType)应该是一个对象.(名称和描述只是简单的字符串.

我对parameterType的HTML是(formControlName用于映射它):

<label for="parameterType">Parameter Type</label>
<select id="parameterType" class="form-control" formControlName="parameterType">
  <option *ngFor="let parameterType of parameterTypes" [value]="parameterType">
    {{parameterType.name}}
  </option>

</select>

select中的值是对象(在别处创建).提交表单时,我想拥有parameterType对象.提交尝试将表单解析为名为Parameter的对象:

export class Parameter {

  public id: number;
  public name: string;
  public description: string;

  public parameterType? : ParameterType
} 

但是当我试图在控制台中读取结果时,parameterType只包含一个字符串"[Object object]",看起来像parameterType只是一个String,并且在提交表单时,该对象被转换为一个简单的字符串.

我的提交功能是这样的:

  onSubmit( {parameter}:{parameter: Parameter} ) {
    console.log(parameter);
  }

现在我只是这样做,在参数类型我发送id和通过服务我得到对象,但这个解决方案不是很好.你知道我可以将对象传递给表单吗？

谢谢

我想单独打开登录页面.但它在routeroutlet页面内部开放.请帮忙.

截图下方的PFB供您参考.

请参考下面的代码.

App.Routing.ts:

import { Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const AppRoute: Routes = [
    { path: '', redirectTo: 'HomeComponent', pathMatch: 'full' },
    { path: 'login', component: LoginCoHomeComponentmponent },
    { path: 'home', component: HomeComponent },

];

App.Component.html

<div id="wrapper">
   <app-top-bar></app-top-bar>
   <router-outlet></router-outlet>
</div>

App.Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgModule } …

我正在尝试学习角度材料2,并#auto在自动完成中遇到了这个属性.我理解auto可以替换为任何文本,但为什么#之前需要一个这里auto有什么名称？

<md-input-container>
  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
               ^^^^ what is name of this property
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

我正面临着这个令人沮丧的问题

没有指令将"exportAs"设置为"ngForm"("
] #f ="ngForm"(ngSubmit)="onSubmit(f)"class ="form-horizo​​ntal">"):ng:/// ComponentsModule/EquipeComponent.html@8:12错误:模板解析错误:没有指令将"exportAs"设置为"ngForm"("] #f ="ngForm"(ngSubmit)="onSubmit(f)"class ="form- horizo​​ntal">"):ng:///ComponentsModule/EquipeComponent.html@8:12

这是我的app.module.ts包含的内容

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { NgForm } from '@angular/forms';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } …

我想在角度2中实施反应式表单验证。当用户单击“提交”按钮时，页面将向上滚动到所需的错误。

@ViewChild('focuserror') errorElement: ElementRef;
      ngAfterViewInit() {
        this.renderer.invokeElementMethod(this.errorElement.nativeElement.querySelector('.ng-invalid'), 'focus');
       }

这是正确的代码吗？抛出错误

• typeError：无法读取null的属性“ focus”