标签: angular-reactive-forms

这里已经存在类似的问题(设置初始值Angular 2 reactive formarray)但我对答案不满意或者可能正在寻找其他解决方案.

我认为使用FormArray的重点是传递对象数组,它应该创建相同数量的组件.但是在上面的示例中,如果查看提供的plunker,即使提供了两个Addresses对象,也会创建一个Address,因为它的空白版本已经在ngOnInit()中创建.

所以我的问题是,如果在ngOnInit()我有这样的地址:this._fb.array([])//空白列表,那么我该如何设置它的值,它动态地从N个地址创建N个地址在我的TypeScript数组中？

我在一个有角度的2+应用程序中使用反应式表单,并且需要将主FormGroup传递给多个组件,以便表单的不同部分(例如页眉,页脚等)可以在单独的组件中进行管理,并由这些不同的组件填充.这就是我现在这样做的方式:

<div class="container-fluid">
  <form [formGroup]="orderForm">
    <order-header [orderForm]="orderForm"></order-header>
    <order-items [orderForm]="orderForm"></order-items>
    <order-footer [orderForm]="orderForm"></order-footer>
  </form>
</div>

我想知道,如果这是一个正确的方法因为我看到这个代码的警告/错误:

错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'true'.当前值:'false'.

在这一行:

<form [formGroup]="orderForm">

有什么建议？谢谢.

我想创建一个自定义输入组件并在表单中重用它，但是我遇到了formGroup和formControlName的问题。

// Form
<form [formGroup]='loginForm'>
  <custom-input [myFormControlName]='email'></custom-input>
</form>

// CustomInput Component's Template
<input formControlName='myFormControlName'>

问题似乎是formControlName预期与FormGroup指令一起使用，并且由于我在子组件中使用formControlName，所以找不到formControlName。有人知道如何解决该问题吗？

我需要帮助以反应形式进行formArray验证.我想验证数组中的每个项目,但我不知道我该怎么做.谢谢.

HTML代码:

    <label for="name">name:</label>
    <input formControlName="name" id="name" type="text">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
       <div *ngIf="name.errors.required">
         required
       </div>
    </div>

TypeScript代码:

 createForm() {
    this.form = this.fb.group({
      person: this.fb.array([this.initItemRows()])
    });
  }

initItemRows() {
    return this.fb.group({
      name: [''],
      info: ['']
    });
  }

  addNewRow() {
    const control = <FormArray>this.form.controls['person'];
    control.push(this.initItemRows());
  }

  deleteRow(index: number) {
    const control = <FormArray>this.form.controls['person'];
    control.removeAt(index);
  }

  get name() { return this.form.get('person.name'); }
  get info() { return this.form.get('person.info'); }

我试过这个:

initItemRows() {
    return this.fb.group({
      name: ['', Validators.required …

我尝试过但未能找到重置角形的方法.

有人可以帮忙吗？

<form #thisIsAForm>
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>

export class Example{
  @ViewChild('thisIsAForm') thisIsAForm;

  resetForm() {
    this.thisIsAForm.reset();
  }
}

我有一个角度4的表单,包含名字+姓氏和包含2个下拉列表(选择)的formarray作为级联下拉列表和删除按钮.表单的其余部分还包含一个发送按钮和一个添加选项按钮.我在这里添加了截图,让您更好地理解.表单添加,删除按钮和发送按钮工作有1个问题级联下拉列表只有当有1个级联下拉列表时,当我添加一个额外的级联时,选择前一组级联的值选择第二个选择搞砸了.我在这里添加了图片以获得更好的解释

正如你可以在第2和第3个画面cascadingdropdown工作当我改变标准选择看我FET正确选项在第二下拉菜单选择

在第4张图片第5张图片和第6张图片上,您可以看到添加选项按钮有效,但是当我在选项2第一个下拉列表中选择一个条件时,它与选项1第二次掉落混乱,现在它还包含第二个选项中的下拉选项

这是我的HTML代码

<form [formGroup] = "profileForm">

  <h1>Profile Form</h1>

 <div>
  <label for = "first-name-input">First Name</label>
  <input type="text" id="first-name-input" formControlName ="firstNameInput">
</div>
 <div>
    <label for = "last-name-input">Last Name</label>
    <input type="text" id="last-name-input" formControlName ="lastNameInput">
  </div>

  <div formArrayName="optionGroups">

    <div *ngFor="let optionGroup of profileForm.controls['optionGroups'].controls;  let i=index "[formGroup]="optionGroup">


      <h4>Option {{ i + 1 }} </h4>




     <div>
      <label for = "select-input">Criteria</label>
      <select id="select-input" (change)="onSelectSelect($event.target.value, i)"  formControlName ="selectInput">

          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects"  [value]= "select.name">{{select.id}}</option>


        </select>

        <label for = "where-input">Option</label> …

我有一个父组件，我想在其中创建和存储我的反应式表单。表单数组中将有多个表单组实例。我想将表单控件从每个表单组传递给子组件，但是在弄清楚如何做到这一点时遇到了麻烦。

这是一个Stackblitz，演示了我想做的事。另外，某些字段仅适用于汽车的某些“品牌”，这就是为什么我的html中包含以下行：

<input type="text" *ngIf="car.make != 'ford'" formControlName="model">

我想将“详细信息”表单组字段移到“详细信息字段”子组件中，但是当我尝试这样做时，它告诉我我没有表单组实例，所以我知道父表单组是未在子组件中注册。任何帮助深表感谢。

我在输入字段上使用内置管道标题 - 在被动形式的用户名.只有当我在输入字段中输入时它才能正常工作,当我从该输入字段的浏览器建议中选择它时它就无法正常工作,即使我集中注意力也是如此.

app.component.ts

ngOnInit() {
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl('abc@test.com', [Validators.required, Validators.email], this.forbiddenEmails)
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
}

app.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div formGroupName="userData">
        <div class="form-group">
           <label for="username">Username</label>
             <input
                  type="text"
                  id="username"
                  formControlName="username"
                  class="form-control"
                  [value]="signupForm.get('userData.username').value | titlecase">
                  <span *ngIf="signupForm.get('userData.username').errors['required']">
                      This field is required
                  </span>
          </div>
         ...
     </div>
     <button class="btn btn-primary" type="submit">Submit</button>
 </form>

当我打字时它工作正常

当我从浏览器选择中选择时它不起作用
虽然我从输入字段中聚焦它仍然是大写的.

有人可以帮助我做错了什么.

@Haifeng Zhang这是我在问题中提到的场景,我在你的stackblitz演示中复制了

我们正在使用Angular 6材料开发我们的应用程序.我们有一个具有自动完成功能的选择框.我确实需要对我的选择框进行验证,因此,当用户搜索选项并且他/她不选择任何选项但将搜索词保留在选择框内时,因为只需要验证选择框,我的表单就会被发布到API.我想要实现的是不允许用户发布表单,除非他/她选择其中一个选项而不仅仅指定搜索词.我该如何实现这一目标？

<mat-form-field>
   <input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form.controls['SELECTBOX_VALUE']">
      <mat-autocomplete #auto="matAutocomplete">
           <mat-option *ngFor="let option of myOptions | async" [value]="option.name"> <span>{{ option.name }}</span> </mat-option>
            </mat-autocomplete>
</mat-form-field>
<small *ngIf="!form.controls['SELECTBOX_VALUE'].valid && form.controls['SELECTBOX_DEGER'].touched" class="mat-text-warn">Please select.</small>

ngOnInit() {
    this.form = this.fb.group({
        ... some other fields
        SELECTBOX_VALUE: [null, Validators.required]
    });

这是我自动编译的过滤器代码,这非常简单

this.form.get('SELECTBOX_VALUE').valueChanges
        .pipe(
            startWith(''),
            map(option => secenek ? this.doFilter(option) : this.options.slice())
        );

doFilter (name: string) {
    return this.myOptions.filter(option =>
        option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

我想知道是否有任何方法可以检索反应表单的“已提交”状态。

使用模板驱动的表单，您可以通过“ngForm”访问 FormGroupDirective，如下所示

<form #form='ngForm' (ngOnSubmit)="handleSubmit()">
    <p *ngIf="form.invalid && form.submitted">Invalid</p>
    <button type="submit">Submit</button>
</form>

但是，当使用反应式表单时，如果不声明我自己的变量（在提交时更新/重置），我就无法实现相同的功能，这看起来很奇怪，因为模板驱动的变体中不需要这样做。

到目前为止我尝试过的：

• （在组件中） @ViewChild(FormGroupDirective) formGroupDirective / （在模板中） formGroupDirective.subscribed
  • 已检查错误后表达式已更改
• 形式=“ngForm”[formGroup]=“myForm”
  • 有多个指令将“exportAs”设置为“ngForm”

有什么建议么？

编辑：反应形式

<form [formGroup]="myForm" (submit)="doSomething()">
    <input formControlName="myInput">
    <p *ngIf="myForm.invalid">This is visible before submitting</p>
    <button type="submit">Submit</button>
</form>