标签: angular2-forms

试图在 Angular 2 中创建一个嵌套的动态表单。

形成骷髅

this.myForm= this.formBuilder.group({
        programmes: this.formBuilder.array([this.initProgramme(),]),
    });

initProgramme() {
        return this.formBuilder.group({
            tickets: this.formBuilder.array([this.initTicket(),])
        });
    }


initTicket() {
        return this.formBuilder.group({
            field1:''
        });
    }

添加程序动态工作具有以下功能： -

addProgToForm(){

    const control = <FormArray>this.myForm.get('programmes');
        control.push(this.initProgramme());
  }

将票添加到程序抛出错误

addTicket(programme: any) {
        const control = (<FormArray>this.myForm.get('programmes')).get(programme); // THROWS ERROR  HERE
         (<FormArray>control.get('tickets')).push(this.initTicket());
    }

在.get(programme)它说path.split 不是一个函数

PS - 'get(programme)' 中的 program 是要添加动态票证的 Program Form Array 的索引。它是从 *ngFor 正确检索的。示例：- 添加第一个程序的索引 0。

我正在尝试使用此示例添加“剪贴板”指令。该示例现在已经过时，因此我必须更新它获取 nativeElement 的方式。

我收到错误

无法读取未定义的属性“nativeElement”

我在代码中用 <====== error 标记了错误：

剪贴板.directive.js

import {Directive,ElementRef,Input,Output,EventEmitter, ViewChild, AfterViewInit} from "@angular/core";
import Clipboard from "clipboard";

@Directive({
  selector: "[clipboard]"
})
export class ClipboardDirective implements AfterViewInit {
  clipboard: Clipboard;

   @Input("clipboard")
   elt:ElementRef;

  @ViewChild("bar") el;

  @Output()
  clipboardSuccess:EventEmitter<any> = new EventEmitter();

  @Output()
  clipboardError:EventEmitter<any> = new EventEmitter();

  constructor(private eltRef:ElementRef) {
  }

  ngAfterViewInit() {
    this.clipboard = new Clipboard(this.el.nativeElement, {   <======error here
      target: () => {
        return this.elt;
      }
    } as any);

    this.clipboard.on("success", (e) => {
      this.clipboardSuccess.emit();
    });

    this.clipboard.on("error", (e) => { …

我有一个 formGroup，我在编辑模式下打开它并使用正确的数据进行初始化。我还将这个初始数据保存在 editForm 中。

对其进行更改后，我想将所有更改重置为初始值，例如：

this.formGroup.reset(this.staffToEdit);

但这一切所做的一切只是在每个领域都留有空白。我发现的唯一解决方法是做类似的事情

this.formGroup.reset({field1 : this.editForm.field1});
...

问题是我需要一些更通用的东西，将所有字段重置为其初始值，而不必遍历每个 formControl。

这可以吗？

注意到 angular5 表单的奇怪行为，使用构建器构建一个表单，其中包含捕获附加动态数据所需的表单数组，表单数组值仅在以下情况下更新：

1. 在创建过程中初始表单控件添加到表单数组this.formBuilder.array(this.getRow())
2. 当第一个初始控件被触摸时

Angular 版本 5.2.0 实验/示例代码在这里

第 1/2 点附录

更改似乎仅在未动态添加到 FormArray 的组件上注册

表单数组元素包含初始化过程的代码

  ngOnInit(){
    this.form = this.formBuilder.group({
      name:[null],
      description:[null],
      hobbies:this.formBuilder.array([this.getRow()])
    });
  }

  getRow():FormGroup{
    return this.formBuilder.group({
      hobby:[null],
      description:[null]
    });
  }

尽管很明显创建了额外的控件，但它们都是空的

然而，一旦触摸第一个元素（注意到从 Fishing 到 Fishing4 的变化，并且控制台输出现在具有剩余动态添加控件的值），所有新的动态字段值都会传播

我有一个公司类，它有一个总部的地址字段。地址是一个接口，它有另一个对象，国家，这是另一个接口。在我的数据库中，我存储了所有国家。我有一个编辑选定公司的视图，在那里我可以设置或更改总部的地址，并为国家/地区创建了一个 mat-select：

<mat-select [(ngModel)]="company.headquarter.country">
    <mat-option *ngFor="let country of companyService.countries" [value]="country">
        {{country.name}}
    </mat-option>
</mat-select>

此代码将所选国家/地区保存到总部的国家/地区字段，但如果我想编辑同一家公司，则 mat-select 不会显示实际值。我怎么解决这个问题？

编辑：

如果我将 ngModel 更改为 company.headquarter.country.id 并将 [value] 更改为 country.id，那么它可以正常工作，但是要存储国家/地区的代码或名称，我必须编写一个方法，该方法将通过在 companyService.countries 数组中输入 id 并将这个国家设置为 company.headquarter.country 的字段。所以这不是一个好的解决方案。

我有一个类型为 number 的输入字段。当用户输入多个零 (0) 并移动到下一个输入字段时，多个零应该回到单个 0。

我在 plunkr 中尝试了以下代码：https ://plnkr.co/edit/dyCp5ZMKOkZvcsw4F8og ? p = preview

<input [(ngModel)]="value" type="number" class="form-control" id="valueId" 
(ngModelChange)="valuechange($event)">

valuechange(newValue) {
//newValue = newValue.toString().replace(/^0+/, '0');
newValue=parseInt(newValue.toString());
console.log(newValue);
}             

这里我提到了当前的图像形式。

1) 它是一个多选下拉菜单。它应该限制重复的税名。对于此图像中CGST选择的两次示例。

选择相同的名称时，它不应显示在此处。所以请帮助我做到这一点。

html

<div class="form-group">
  <label for="tax">Tax Name</label>
  <select class="form-control" id="tax_name" (change)=" dropdown(tax.value)" [(ngModel)]="model.tax" name="tax_name" #tax="ngModel">
    <option value="addNew">
      <i class="fa fa-plus" aria-hidden="true"></i>Add New Tax </option>
    <hr>
    <br/>
    <option *ngFor="let i of taxlist" [value]="i.tax_name">{{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>
  </select>
</div>
<div>

  <label for="percentage">Tax Percentage</label>
  <input type="text" class="form-control" id="tax_percentage" placeholder="Percentage" pattern="[0-9]+" minlength="0" maxlength="3"
    [(ngModel)]="per" name="tax_percentage" #percentage="ngModel">
</div>
<button (click)="addContact(tax.value,percentage.value);" type="button" class="btn btn-success btn-sm text-right">
  <i class="fa fa-plus fa-lg"></i>
</button>

我正在使用模板驱动的表单，我想从表单控件中删除一个 formGroup。我怎样才能做到这一点？我的表单中有以下控件

正如你在这张图片中看到的，我有一组 formControls 和一个 formGroup。我想删除 formGroup，我该怎么做？

我可以像这样删除 formGroup 中的 formControl

const ymmtGroup = <FormGroup>this.form.controls['someGroup'];
ymmtGroup.removeControl('someControl');

但不知道如何删除 formGroup 本身 UPDATE 1

我做了这样的事情，让我知道这是否正确 var formControls=this.form.controls; 删除 formControls.someGroup;

我正在尝试为反应式表单构建一个可重用的字段组件，但我无法从custom-input组件中获取值。

<form [formGroup]="form" (ngSubmit)="submit()">
  <custom-input id="name" name="name" formControlName="name"></custom-input>
  <button type="submit" name="button">Submit</button>
</form>

我的自定义输入可重用组件

import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from "@angular/forms";

@Component({
  selector: 'custom-input',
  template: '<input type="text" [class]="class" [id]="id" [name]="name" [formControlName]="formControlName">',
  styles: []
})
export class CustomInputComponent implements OnInit {
  @Input() public id: string;
  @Input() public class: string;
  @Input() public name: string;
  @Input() public formControlName: string;

  constructor() { }

  ngOnInit() {
  }
}

我有一个带有我自己的自定义控件组件的表单：

@Component({
  selector: "my-app",
  template: `
    <form [formGroup]="form">
      <app-custom-control formControlName="customControl"></app-custom-control>
    </form>

    <button (click)="touch()">
      Touch!
    </button>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      customControl: "1"
    });
  }

  touch() {
    this.form.markAllAsTouched();
  }
}

我的自定义控制组件内部又包含另一个自定义控制组件（在我的真实应用程序中需要它，因为外部控制组件有两种模式 - 读取和编辑）：

@Component({
  selector: "app-custom-control",
  template: `
    <ng-select [ngModel]="value" [items]="items"></ng-select>
  `,
  styleUrls: ["./custom-control.component.css"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomControlComponent,
      multi: true
    }
  ]
})
export class CustomControlComponent implements ControlValueAccessor, OnInit {
  items = ["1", "2"]; …