标签: angular-reactive-forms

我正在寻找Angular 2文档,并且没有办法找到关于如何使用formGroup的最佳实践.

是否必须formGroup用表格标签括起来？

我看过这个堆栈溢出问题:

formGroup需要一个FormGroup实例

我已经创建了这个组件模板:

<div [formGroup]="infoIdentityForm">
  <div class="info-identity_title" *ngIf="showTitle">
    <div class="group-title">Titre</div>
    <div class="group-radio">
      <span *ngFor="let choice of enumTitleValue">
        <label>{{choice}}</label>
        <input type="radio" formControlName="title" name="title" [id]="choice"/>
      </span>
    </div>
  </div>
  <div class="info-identity_firstname">
    <div class="group-title">Prénom</div>
    <div class="group-input">
      <input type="text" class="form-control" formControlName="firstName" maxlength="25">
    </div>
  </div>
  <div class="info-identity_lastname">
    <div class="group-title">Nom</div>
    <div class="group-input">
      <input type="text" class="form-control" formControlName="lastName" maxlength="25">
    </div>
  </div>
</div>

我试图避免使用嵌套的表单标签

我想在Ionic 2中构建一个表单,我想在其中显示一个切换列表(每个切换表示一项运动).

从DB我检索的运动列表试图在subscribe()函数中初始化我的表单,但看起来该视图正在抛出错误,因为在解析[formGroup]属性时,该表单尚不存在. ..

在我看来

<form [formGroup]="accountForm">

    <ion-list>

      <!-- Personal info -->
      <ion-list-header padding-top>
        Informations personnelles
      </ion-list-header>
      <ion-item>
        <ion-label stacked>Prénom</ion-label>
        <ion-input formControlName="firstname" [value]="(user | async)?.info.firstname" type="text"></ion-input>
      </ion-item>

      <!-- Sport info -->
      <ion-list-header padding-top>
        Mes préférences sportives
      </ion-list-header>
      <ion-list formArrayName="sports">

        <ion-item *ngFor="let sport of accountForm.controls.sports.controls; let i = index" [formGroupName]="i">
          <ion-label>{{sport.name | hashtag}}</ion-label>
          <ion-toggle formControlName="{{sport.name}}"></ion-toggle>
        </ion-item>

      </ion-list>

    </ion-list>


  </form>

在我的控制器中

ionViewDidLoad() {
    console.log('MyAccountPage#ionViewDidLoad');

    // Retrieve the whole sport list
    this.sportList$ = this.dbService.getSportList();
    this.sportList$.subscribe(list => {

      // Build form
      let sportFormArr: FormArray …

我想从树结构中生成一个反应形式.

以下是创建表单项(表单组和控件)的代码.对于嵌套在表单组中的控件,我使用递归模板.

import { Component, Input, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'form-item',
  template: `
    <ng-container [formGroup]="form">
      <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments }"></ng-container>

      <ng-template #formItemTemplate let-pathSegments>
        
        <ng-container *ngIf="pathSegments.length > 1">
          <div [formGroupName]="pathSegments[0]" class="form-group">
            <ng-container *ngTemplateOutlet="formItemTemplate; context:{ $implicit: pathSegments.slice(1) }"></ng-container>
          </div>
        </ng-container>

        <ng-container *ngIf="pathSegments.length === 1">
          <div class="form-control">
            <label>{{pathSegments[pathSegments.length - 1]}}</label>
            <!--<input type="text" [formControlName]="pathSegments[pathSegments.length - 1]"/>-->
            <input type="text"/>
          </div>
        </ng-container>
        
      </ng-template>
    </ng-container>
  `,
})
export …

我的“ formControl回应式表单”中包含以下内容：

<input class="input" formControlName="email" [placeholder]="">

我想知道是否有办法以编程方式设置占位符？

就像是： this.formGroup.get('email').placeholder = 'Some value';

我的表单数组html标记完美运行，（缩短了快照）

 <div formArrayName="partners">
   <div class="row" *ngFor="let ctrl of this.patientRestrationForm.get('partners').controls; let i = index"[formGroupName]="i">
     <div class="col-xs-8">  
      <input type="text" class="form-control" formControlName="recordId">
     </div>
     <div class="col-xs-8">
       <input type="text" class="form-control" formControlName="patientFileId">
     </div>
 </div>

现在我知道我们可以根据内联ngx-datatable doc定义列。

是否有可能将这些控件绑定到ngx-datatable定义的列

<div formArrayName="partners">
   <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
   [rows]="this.patientRestrationForm.get('partners').value">
   <ngx-datatable-column name="recordId">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
         <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
         {{value}}
         </span>
         <input [formControlName]="'recordId'" autofocus (blur)="updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']"
         type="text" [value]="value" />
      </ng-template> …

Angular 5应用程序工作正常但我在使用生产构建它时遇到以下错误.它也很好,ng build但不是ng build --prod.

"email"类型的参数不能分配给'string []'类型的参数.

行上的代码:

<mat-form-field>
  <input matInput placeholder="Email" formControlName="email" required>
  <mat-error *ngIf="form.hasError('email', 'email') && !form.hasError('required', 'email')">
    Please enter a valid email address
  </mat-error>
  <mat-error *ngIf="form.hasError('required', 'email')">
    Email is <strong>required</strong>
  </mat-error>
</mat-form-field>

形式:

private createForm() {
  this.form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', Validators.required)
  });
}

我有一个从API返回的嵌套JSON响应，其结构与我需要在模板上显示的方式不同，例如：

@Component({
  selector: 'reactive-form-example',
  styles: ['./reactive-form-example.component.css'],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div formGroupName="first">
            <input type="text" placeholder="some id" formControlName="someId">
            <div formGroupName="second">
                <input type="text" placeholder="some text" formControlName="someText">
            </div>
        </div>
    </form>
  `
})
export class ReactiveFormExampleComponent {
    form = new FormGroup({
        first: new FormGroup({
            someId: new FormControl('587824')
        }),
        second: new FormGroup({
            someText: new FormControl('the sky is blue')
        })
    });
    onSubmit(value) {
        console.log('Submit', this.form.value);
    }
}

问题：是否有可能formGroupName嵌套在另一个对象中formGroupName，或者是否有更好的方法使用反应形式来实现相同的结果？

我正在尝试使用以下正则表达式验证密码:
^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,}).
请注意,没有终止$字符,因为这会阻止接受有效密码.(我不确定为什么输入字段不会终止字符串).
但是,Angular Validators.pattern添加了字符串char的结尾.因此我的有效密码失败了.
如何防止模式验证器添加$？
我想我可以推出自己的密码验证器,但肯定有更好的解决方案......？

编辑:应该成功的密码:

• Test1234
• tEst1234
• tesT1234
• 1234Test
• 1234tesT
• T#St1234

应该失败的密码:

• TEST1234
• test1234
• tEst123
• Test123
• 测试一下
• 12345678

验证者声明:

this.password = new FormControl('', [Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,})')]);
this.userForm.addControl('Password', this.password);

我有一个反应形式验证器样本.它在我们输入值之前最初显示验证错误消息.

预期的行为是,在输入值后,它必须显示错误消息

样本链接

我<some-input>包装了一个自定义控件组件<ext-some-input>。SomeInput已封装，具有自己的API并支持反应形式。 ExtSomeInput作为高层次的包装上创建SomeInput。

我有以下HTML：

<form [formGroup]="form">
    <ext-some-input formControlName="name">
</form>

和ExtSomeInput的html：

<some-input formControlName="_???_"></some-input>

问题是如何将formControlName转发到内部SomeInput组件？我需要将窗体和内部formControl绑起来。这可能吗？

编辑：

我创建了这个问题的stackblitz项目：这里