标签: angular2-forms

我正在尝试在 angular 2 中创建一个与内置[(ngModel)]指令一起使用的自定义日期指令。
根据 angular2 文档（以及我找到的各种博客），ControlValueAccessor如果我将指令放在<input />元素上，我实现了可以正常工作的界面。

<input name="birthday" my-date [(ngModel)]="model.birthday" />

当我将指令放在另一个组件上时，出现以下错误：

<other-input name="birthday" [(ngModel)]="model.birthday" my-date></other-input>

多个自定义值访问器匹配具有未指定名称属性的表单控件

从上面的代码看起来，我已经指定了 name 属性。所以我被这个异常困住了，我找不到任何有用的东西。这是ControlValueAccessor接口的某种限制吗？

该other-input组件是第三方组件，我无法对其进行任何更改。此外，我想在许多组件上使用它（例如也在离子输入上），而不仅仅是一个。欢迎任何有关如何解决此问题的建议或想法！

ps：我使用带有打字稿的 Angular 2.4.0

我有一个IGeneric导出到模块 A的类（），我在模块 B 中导入了该模块（A），但我无法在模块 B 中使用导出的类（IGeneric）。

注意：导出的类不是组件、指令和服务。它是一个普通的打字稿类

任何帮助将不胜感激，提前致谢。我试图导出的类

export class IGeneric{
header : any[];
content : [{
   lable :any,
   value :any
}]
}

我正在尝试在 Angular 4.0.2 中创建一个反应式表单，它有一个<textarea>从数据库中提取的带有默认内容的字段。中的内容<textarea>显示没有任何问题，但是当我formControlName="sectionContent"向<textarea>元素添加 时，其中的内容消失了。

<textarea formControlName="sectionContent ">{{ section.sectionContent }}</textarea>

这个问题只发生在<textarea>元素上，因为我<input>在表单中有其他字段，但这些内容仍然出现。

FormGroup 看起来像这样：

this.sectionForm = new FormGroup({
  sectionTitle: new FormControl(),
  sectionContent : new FormControl()
});

有没有人遇到过这个问题？

我在我的 angular 2 项目中使用反应形式进行验证。我想突出显示按下“提交”时无效的字段。我已经通过使用 md-Error 在输入标签中实现了这一点，但我无法在 md-Select 中做到这一点。有人可以帮忙吗？

截图：http : //i.imgur.com/uOQbwaZ.png

这是我正在使用的 md-select 示例：

<md-select placeholder="Listing Type" formControlName='listingType' required >
              <md-option *ngFor="let type of listType" [value]="type">
                {{ type }}
              </md-option>
            </md-select>

这是我正在使用的 md 输入：

<md-input-container class="more-width">
              <input mdInput formControlName='price' required placeholder="Price">
              <md-error>Please Enter Price</md-error>
            </md-input-container>

这是我正在申请的验证

 this.listingForm = this.fb.group({
      propertyType: ['', Validators.required]
})

我正在使用表格

<form [formGroup]="form">
    <input type="text" value={{userDetails.first_name}} formControlName = "firstName">
    <button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>

这里的userDetails.first_name价值是汤姆。它在文本框内的 UI 上可见；但是当我提交表单时form.firstName给了我空值。

我正在 Angular2 - Redux 中构建一个向导。我正在使用 Reactive Forms 来处理和提交内部每一步的数据。我需要以编程方式触发表单验证，因为为了进入下一步，我的号召性用语按钮的声明位于与 stepComponent 分开的组件中。请参阅下面的线框

组件的线框

当前行为

1. 只有当表单控件发生更改时，它自己的验证才会运行。它的touched & valid属性会相应地更新。

2. 由于我在 Redux 环境中，因此我调度了一个操作来获取当前步骤表单数据，以便应用于有效负载。完成后，我触发另一个操作来保存数据。

3. 实际上，我通过使用以下方法知道表单何时有效或无效：

    submitForm(form: FormGroup):void{
       if(form.valid){
         this.actionsStep.saveStep(form.value);
       }else{
         console.log('Form invalid ')
       }
     }
   

   Run Code Online (Sandbox Code Playgroud)

4. 由于我的表单使用控件的属性在发生错误时呈现自定义消息，因此我想通过提交表单或使用另一个函数来重新运行验证，以便能够再次使用控件的属性来通知发生错误的位置。

StepComponent.ts : 表单声明

this.stepForm = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required]
});

step-component.html : 表单 HTML

<form id="ngForm" [formGroup]="stepForm" (ngSubmit)="submitForm(stepForm.value)" class="form-horizontal form-box-content">
    <div class="form-group row" [ngClass]="{'has-danger' :name.invalid && name.touched}">
      <label class="col-md-2 col-form-label">Name:</label>
      <div class="col-md-10">
        <input 
        name="titulo" class="form-control required" 
               formControlName="name" placeholder="" type="text"  [ngClass]="{'form-control-danger' :name.invalid && name.touched}" > …

抱歉这个问题。这与我的子组件之一有关，该组件在写入表单时拒绝空字符串。

我有一个表单控制订单号。当我尝试这样做时，
this.myForm.controls['orderNo'].setValue = '123';
它工作正常，并且我的视图已使用此值更新。
但问题是，我无法使用 null 或空字符串设置控件。每当我这样做
this.myForm.controls['orderNo'].setValue = null;
或
this.myForm.controls['orderNo'].setValue = '';
没有反映我的观点时。但是我可以看到表单控件包含该空值。（ng.probe($0).componentInstance.myForm.controls['orderNo'].value 返回 null）。它只是没有反映在视图中。

请帮助我一些想法。谢谢你。

我需要解决下面提到的问题。请帮助解决问题。

情况1：

密码是仅用于新用户创建的必填字段。

密码：new FormControl('', Validators.required),

案例2：

使用 *ngIf 更改隐藏的密码可见性

( "ng-reflect-ng-if":"false" )

案例3：

现在如果我点击保存它说需要密码。帮我解决这个问题字段不应该验证它是否隐藏。

谢谢。

我是 Angular 的新手，我想使用 Angular 构建一个多步骤向导。

要求基本上是为了方便申请中的商店卡的申请过程。我需要开发 3 个流程/3 个多步骤向导。

所以我目前的解决方案是：

我已经构建了 8 个共享的 Angular 组件，代表了流程中的不同步骤，我想在使用 Angular 的 3 个多步骤向导中使用这些共享组件。

例如，我按以下方式完成了第一个多步：

我创建了一个父组件：

<div class="steps-form col s11">
   <div class="steps-row setup-panel">
       <div class="steps-step" *ngFor="let step of wizManager.Steps">
            step.StepName
       </div>
   </div>
</div>
<div class="card-content" >
<router-outlet (activate)="onActivate($event)">
</router-outlet>
</div>

我在路由器插座事件上使用 OnActivate：

onActivate(componentRef: any) {
        this.currentComponent = componentRef;
}

在父级中，我有一个服务，用于验证下一步的每个步骤：

next(step: WizardStepDTO) {
        this._slimLoadingBarService.start();
        this.loadingControl.showloading();

        //Validate Current Step first 
        if (step.RequiresValidation) {
            this.ValidateCurrentStep(step, this.currentComponent);
        }

        //save data
        if (step.ValidationResult.FormStepState == StepState.ValidAndReadyForProcessing) {
            this.ProcessCurrentStep(step, this.currentComponent);
        } …

我正在尝试以 Angular 2+ 反应形式验证出生日期。当所选DOB日期超过100岁时，我想显示错误消息。

前端侧

 <div [ngClass]="setClassDOB()">
 <input class="form-control" type="date"name="dob"formControlName="dob" placeholder="DOB">
 </div>