标签: angular-reactive-forms

我正在使用Angular 2,我想分别验证每行中的控件.但我没有办法做到这一点.我希望它只使用反应形式而不是使用模板驱动的方法.我想要每个都有[formGroup] <tr>.任何帮助将不胜感激.以下是我的代码结构:

<tbody *ngFor="let single of allTeamDetails"                
       [ngClass]="{'alternate-row-color': $even}">
  <tr>
    <td class="td-data first-column">
      <input type="text" class="input-text form-control" 
             [value]="single.first_name">
    </td>
    <td class="td-data second-column">
      <input type="text" class="input-text form-control" 
             [value]="single.last_name">
    </td>
    <td class="td-data third-column">
      <input type="email" class="input-text form-control" 
             [value]="single.email">
    </td>
    <td class="td-data fourth-column">
      <select class="selection-dropdown width-80-percent" 
              [value]="single.user_role">
        <option *ngFor="let singleRole of allUserRole"      
                value="{{singleRole.name}}"> 
                {{setUserRoleAndType(singleRole.name)}}</option>
      </select>
    </td>
    <td class="td-data fifth-column" >
      <input type="password" class="input-text form-control">
    </td>
    <td class="td-data sixth-column" >
      <input type="password" class="input-text form-control">
    </td>
    <td class="td-data save-send-tm-data">
      <button class="btn save-user-details save-sub-account-details" …

我正在将Angular 1.6代码转换为Angular 4,我遇到了一个元素列表问题.Angular 1.6中的代码是:

<select ng-model="$ctrl.level" ng-options="item as item.label for item in $ctrl.referentiel.levels | orderBy : 'index' track by item.id"                                   id="childLevel" name="childLevel" class="size-xl"                               >
<option value="">Select</option>
</select>

我的列表中未引用对象级别,因为使用对象referentiel.levels加载此列表.但是由于trackby,我的列表元素和我的对象级别之间的匹配完成.因此,当加载我的对象级别时,将在列表中选择该元素.

现在,我尝试使用Reactive Forms转换此代码.在我的HTML代码中,我有:

<select formControlName="levelControl" id="levelSelect" name="levelSelect" class="size-xl">
<option [ngValue]="null">Select</option>
<option *ngFor="let level of referentiel.levels;trackBy:identify" [ngValue]="level">{{level.label }}</option>
</select>

在我的组件中,我有OnInit方法:

(<FormControl>this.myForm.controls.levelControl).setValue(this.level);

方法识别很简单:

identify(index,item){
   return item.id;
}

但是这种竞争是不同的.当我使用对象Level设置我的控件的值时,未选择列表中具有相同id的项.

我找到了解决方案,但我不明白为什么它不起作用.我的解决方法是用HTML编写此代码:

<option *ngFor="let level of referentiel.levels;trackBy:identify" [ngValue]="level.id">{{level.label }}</option>

在我的打字稿文件中:

(<FormControl>this.myForm.controls.levelControl).setValue(this.level.id);

所以,现在它正在工作:我的项目在列表中被选中.

在这种情况下,我不明白两个版本的Angular之间的区别.也许我错过了什么......

谢谢你的帮助.

我试图在Angular 5.1.2和Angular Material 5.0.2上使用mat-checkbox和反应形式.

一切都运行良好,除了当我使用patchValue({amateur:[false])时,它仍然被检查.有什么奇怪的是我有其他形式,我在做同样的事情,他们工作正常.它也不只是业余复选框,它是所有复选框都被选中.仅以"业余"为例.

formControl amateur.value始终为false.但是,一旦执行了修补值,就会检查控件.

我错过了什么？

HTML5

 <form [formGroup]="showClassGrp">
   <mat-checkbox id="amateur" class="amateur" color="primary" 
      formControlName="amateur">Amateur</mat-checkbox>
 </form>

打字稿

FormBuilder的工作和显示是正确的.

this.showClassGrp = this.fb.group({

  ...
  amateur: [false],
  ...
});

补丁showClassGrp和所有复选框都被检查,即使它们的formControl值为false.

    this.showClassGrp.patchValue({
      className: [this.showClass.className],  //this works
      amateur: [false],  // this changed the display to checked.
      ...
});

我正在Angular 5中实现一个反应形式,我需要在两个事件中触发验证,当字段模糊时以及提交表单时.

我已使用updateOn属性将其设置为"模糊",但如果您专注于某个字段并按Enter键,则不会触发模糊事件,并且不会更新该字段的值,除非我单击远离领域.

据我所知,没有办法将updateOn设置为模糊和提交.

有没有办法实现这个目标？

我有一个自定义表单控件与验证.我在其中使用一个独立的FormControl来处理值和一些验证.

当控件从另一个FormGroup重置时,Angular有没有办法重置内部FormControl？

贝娄是我的自定义表格控件.我希望能够重置durationControl.

duration.component.ts

import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, Self } from '@angular/core';
import { AbstractControl, ControlValueAccessor, FormControl, NgControl, ValidationErrors, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith, tap } from 'rxjs/operators';
import { Regex } from '../../constants';

@Component({
    selector: 'my-duration',
    templateUrl: 'duration.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DurationComponent implements ControlValueAccessor, OnInit {
    @Input() required: boolean;

    durations: string[] = [
        '15m',
        '30m',
        '45m',
        '1h',
        '1h 15m',
        '1h 30m',
        '1h 45m',
        '2h'
    ]; …

我正在将Angular 6与反应形式一起使用，并且试图弄清楚如何格式化从webapi返回的日期值。日期显示为1973-10-10T00：00：00，我想将其格式化为10/10/1973。下面是检索数据并显示它的代码。webapi json dob值为1973-10-10T00：00：00。模型中的dob值的类型为Date。

html

<input formControlName="dob" type="text" [value]="dob | date: 'MM/dd/yyyy'" class="form-control" />

绑定形式

this.userInfoForm = this.fb.group({
      'userId': ['', [Validators.required]],
      'dob': ['', [Validators.required]]
});

节省负载

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {
      this.userInfoModel$ = data as UserInfoModel;
      this.userInfoForm.patchValue(this.userInfoModel$);
});

api调用

accountUserInfo(userId: number) {
return this.http.post(this.url + "UserInfo", userId)
.pipe(
  retry(3),
  catchError(this.handleError)
)}

感谢您将日期转换为MM / dd / yyyy格式的任何帮助或指导。将html设置为date值确实可以使它看起来不错，但我不想使用内置的浏览器日期显示，因此需要将其转换为字符串。

提前致谢。

在Angular 6应用程序下，我正在使用反应式表单。

我的目的是在提交时，我想将重点放在出现错误时的第一个无效输入上。

我的表格如下所示：

<form [formGroup]="addItemfForm " (ngSubmit)="onSubmitForm()">

        <div class="form-inline form-group">
          <label class="col-md-2 justify-content-start">
            Libellé du pef
            <span class="startRequired mr-1"> *</span>
          </label>
          <input type="text"
                 maxlength="100"
                 formControlName="libellePef"
                 class="col-md-6 form-control"
                 placeholder="saisie obligatoire"
                 [ngClass]="{ 'is-invalid': submitted && formFiels.libellePef.errors }"/>
          <div *ngIf="submitted && formFiels.libellePef.errors" class="col invalid-feedback">
            <div class="col text-left" *ngIf="formFiels.libellePef.errors.required">Libellé du pef est requis.</div>
          </div>
        </div>

        <div class="form-inline form-group">
          <label class="col-md-2 justify-content-start">
            Code Basicat
            <span class="startRequired mr-1"> *</span>
          </label>
          <input type="text"
                 maxlength="100"
                 formControlName="codeBasicat"
                 class="col-md-3 form-control"
                 placeholder="saisie obligatoire"
                 [ngClass]="{ 'is-invalid': submitted …

我正在使用 Angular8 和反应式形式。我的 ngOnInit 是：

ngOnInit(): void {
  this.makeForm = this.fb.group(
    year: ['', Validators.required],
    amount: ['', Validators.required],
    desc: ['', Validators.required],
    details: new FormArray([
      this.det(),
    ]
  );
}

det() {
  return new FormGroup({
    for: new FormControl(''),
    remarks: new FormControl('')
  });
}

我有来自后端的数据来修补数组：

 {
  "amount": 9000,
  "year": 1996,
  "id": 1,
  "desc": "P1",
  "details": [
    {
      "id": 1,
      "remarks": "ok",
      "for": "1"
    },
    {
      "id": 24,
      "remarks": "OK",
      "for": "1"
    },
    {
      "id": 25,
      "remarks": "OK",
      "for": "1"
    }
  ]
 }

我通常用这种方法修补值：

getppredit() …

在使用最新版本的 Angular（版本 14）时，我似乎没有做得很好，因此严格类型化的反应式表单无法按预期工作。

表单是ngOnInit使用injected在内部初始化的FormBuilder。

 public form!: FormGroup;

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit(): void {
    this.initializeForm();
  }

  private initializeForm(): void {
    this.form = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(3)]],
      content: ['', Validators.required],
    });
  }

现在，当我尝试访问表单的控件时，没有自动完成功能，类型为FormGroup<any>。此外，当尝试访问对象上不存在的控件时，它不会引发错误FormGroup。

• 例子：

• package.json

• 角度官方文档：

https://angular.io/guide/typed-forms

我有一个包含两个字段的反应式表单。第一个是使用 ControlValueAccessor 的自定义输入，最后一个只是常规的 HTML 输入。

问题是，执行 form.reset() 后，自定义输入的值将被保留，即使其反应形式的值已经为 null。

正如您在图像中看到的，我第一次输入并清除值时，它运行良好。

但是，第二次及以后，输入值仍然保留在自定义输入组件中。同时，无论我单击“清除输入”多少次，正常的 HTML 输入都会被清除并且运行良好。你能帮我吗？我错过放东西了吗？

文件：

• app.component.ts/html：表单所在的位置
• custom-input.component.ts/html：自定义输入组件

表格如下：

.ts 文件

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      firstName: [{ value: '', disabled: false }],
      lastName: [{ value: '', disabled: false }],
    });
  }

  clearInput() {
    this.form.reset();
  }
}

html 文件：

<form [formGroup]="form">
  <app-custom-input formControlName="firstName"></app-custom-input>
  <input formControlName="lastName" …