标签: angular-reactive-forms

我ReactiveForms在我的 Angular 应用程序中使用。我想如果用户输入的数字少于 7 个，所以应该在那里显示错误消息，但不幸的是，如果有任何错误或解决方案，它就不起作用，所以请提供给我。谢谢

服务.ts

PhoneNo: ['', [Validators.required, Validators.minLength(7)]],

html

<input class="full-width has-padding has-border" formControlName="PhoneNo" type="tel" placeholder="Mobile *" />
        <img src="../../../../assets/img/required-img.png" class="required-img"
          *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.required"
          title="This fields is mandatory" data-toggle="tooltip" />
          <label *ngIf="service.formModel.get('PhoneNo').touched && service.formModel.get('PhoneNo').errors?.minLength">Minimum 7 characters required</label>

i have problems with reactive forms and an array of radio buttons.

My Form looks like this:

There is a player in a row and i have to choose the status.

component:

 <tr *ngFor="let data of player">
        <th>{{data.firstname}} {{data.lastname}}</th>
        <th *ngFor="let stat of status">
        <input type="radio" id="opt1+{{data.id}}" value="{{stat}}" name="option+{{data.id}}" formArrayName="status???"></th>
      </tr>

The player data comes from an API and status is an array.

ts:

this.myForm = formBuilder.group({
    status: this.formBuilder.array,
    })

My example does not work. I need a json-file as …

我的 angular 项目中有反应形式，它定义如下：

this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
});

如何检查密码和确认密码的匹配？

我有 Angular 反应式表单，其中每个输入都是一个单独的组件，它接收父表单为@Input(). 在这个组件中，我想订阅他的错误，并更改变量值，如果有一些错误。每个控件的错误不仅来自值变化，所以我无法检查模糊或值变化的错误。这样做的正确方法是什么？

表单.html

<form [formGroup]="formName">
   <app-input-group [parentForm]="formName" [name]="controlName"></app-input-group>
</form>

输入组.ts

export class InputGroupComponent {
  @Input parentForm: FormGroup
  @Input name: string

  public status: string

  // Need to call this function when control in form have errors
  public getStatus() {
     if (this.parentForm.get(this.name).errors) {
        this.status = 'suspended'
     } else {
        this.status = 'boosted'
     }
  }
}

我需要制作一个反应式表单的深层副本。我曾尝试使用 ES6 扩展语法来克隆表单。我使用 Typescript 泛型将传播语法的返回值类型转换为FormGroup. 此外，克隆表单变量的类型设置为FormGroup.

但是通过这种方式克隆表单时，克隆的表单变量上的类型丢失了，即不再是 的类型FormGroup。因此，克隆形式不可用。

这是相同的堆栈闪电战：表单克隆

上述克隆方式有什么问题？为什么类型FormGroup在克隆形式上丢失了？

我正在尝试使用 Reative Form 创建一个自定义输入组件，Angular 7但我无法将事件传递到输入字段。

我component有一个标签和一个输入字段以及一个特定的布局。我component html看起来像这样：

<div id="customInputGroup"  [formGroup]="parentFormGroup" [ngClass]="{'input-value': hasValue()}">
    <label [for]="inputId">{{label}}</label>
    <input [id]="inputId"  [name]="inputName"  class="form-control" [placeholder]="placeholder" [formControlName]="inputName" [mask]="mask">
</div>

而在我的Component：

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements OnInit {


  @Input('placeholder') placeholder = '' ;
  @Input('label') label = '';
  @Input('inputId') inputId = '';
  @Input('inputName') inputName = '';
  @Input('parentFormGroup') parentFormGroup:FormGroup;
  @Input('mask') mask;
  constructor() { }

  ngOnInit() {
  }

  hasValue(){
    return (this.parentFormGroup.get(this.inputName).value != undefined …

使用ComponentFactoryResolver动态创建组件很简单，但是当我尝试<mat-error>在<mat-form-field>. 我一直在使用 Netanel Basal 的示例和 Bootstrap 组件，它非常适合生成表单控制错误，但由于 Angular Material 中使用的内容投影，<mat-error>我似乎无法让它适用于 Angular Material v8.2.1。

是否可以<mat-error>在 a 中动态创建a<mat-form-field>并使其内容项目正确？

我有一个由单个表单数组组成的表单组：

ngOnInit() {
    this.deviceDetailsFormGroup = this._formBuilder.group({
        deviceDetails: this._formBuilder.array([
            this.buildDeviceDetailsForm()
        ])
    });
}

Form Array 中的每个控件都需要验证器：

buildDeviceDetailsForm(): FormGroup {
    return this._formBuilder.group({
        ipAddressCtrl: [
            "",
            [Validators.pattern(ipaddressPattern), Validators.required]
        ],
        hostnameCtrl: [
            "",
            [
                Validators.required,
                Validators.maxLength(30),
                Validators.minLength(5)
            ]
        ]
    });
}

下面是我对 Form Array 的 push 和 remove 函数：

addNewDevice() {
    this.deviceItems = this.deviceDetailsFormGroup.get(
        "deviceDetails"
    ) as FormArray;

    if (this.deviceItems.length > MAX_DEVICES) {
        this.toastNotif.errorToastNotif(
            `A maximum of ${MAX_DEVICES} devices can be selected for a single job scan`,
            "Too many devices selected"
        );
        return;
    } …

如何将required验证器设置为可选是反应形式。我有两个输入amount和volume. 如果用户选择amount单选按钮，则必须从输入中删除所需的验证volume。如果volume，必须从amount

应用程序.html

  <form #recForm="ngForm" name="form" [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>
        <div class="label">
          <mat-label>Charged by</mat-label>
        </div>
        <mat-radio-group (change)="onChargesType($event)">
          <mat-radio-button
            *ngFor="let charges of chargedBy; let i = index"
            [checked]="i === 0"
            [value]="charges"
            >{{ charges }}</mat-radio-button
          >
        </mat-radio-group>
      </div>

      <mat-form-field *ngIf="!isAmount">
        <input formControlName="volume" matInput placeholder="Volume" />
      </mat-form-field>
      <mat-form-field *ngIf="isAmount">
        <input formControlName="amount" matInput placeholder="Amount" />
      </mat-form-field>
  </form>

应用程序

chargedBy: string[] = ['amount', 'volume'];

  ngOnInit() {
    this.isChargedByAmount = true;
    this.form = this.fb.group({ …

编辑 1：

我修改了我的问题以澄清我的需要。

我有一个FormGroup包含FormControl.

其中FormControl，有一个接收数组值。

我正在寻找的是，是否有一种解决方案可以使FormControl接收数组值而不是接收逗号分隔的字符串值（不带括号[]）中的值。

我得到了什么：（数组值）

我想要什么：（字符串值用逗号分隔，没有brackets[]）

叉子的链接：这里

• 预先感谢您的帮助

原始问题：

我想将从 a 接收到的数据转换为FormArray带有逗号的字符串。

我设法在 Console.log 中做到了这一点，但我不知道如何将转换后的数据发送到FormGroup.

我的 TS 文件：

  accessoire: string;
  this.demandeDevis = this.formBuilder.group({
    accessoires: new FormArray([]),
    accessoire: this.accessoire,
  });

  onCheckboxChange(event) {
    const checkAcs: FormArray = this.demandeDevis.get(
      'accessoires'
    ) as FormArray;
    
    if (event.target.checked) {
      checkAcs.push(new FormControl(event.target.value));
      console.log(checkAcs.value.toString());
      this.accessoire = checkAcs.value.toString();
    } else {
      let i: number = 0;
      checkAcs.controls.forEach((item: FormControl) => { …