标签: angular-forms

这个问题可以在这个 stackblitz 中看到：

我有一个有效载荷：

payload = {
  id: 1,
  name: 'This is the payload',
  children: [
    { id: 1, name: 'Child 1' }
  ],
};

我从中创建了一个表单组：

this.form = this.fb.group(this.payload);

然后我显示表单的值：

{{ form?.value | json }}

结果是：

{ "id": 1, "name": "This is the payload", "children": { "id": 1, "name": "Child 1" } }

如您所见，该children属性从一个数组变成了一个对象。

1. 那是怎么发生的 ？
2. 是否有可能阻止 Angular 这样做？
3. 如果我需要使用 formArray，有没有办法让它自动？

我写了下面的代码片段，我认为这将禁用FormControl的FormArray。

some.component.html

<form [formGroup]="testForm">
    <div *ngFor="let num of countArr">
        <input type="text" formNameArray="arrs">
    </div>
</form>

some.component.ts

countArr = [1, 2, 3, 4, 5];
count = 5;
arrs;
testForm: FormGroup;

this.testForm = this.formBuilder.group(
    arrs: this.formBuilder.array([])
);

this.arrs = this.testForm.get('arrs');

for (let i = 0; i < this.count; i++) {
    this.arrs.insert(i, new FormControl({value: '', disabled: true}));
}

但是for执行完成后，我检查了表单，发现没有任何内容被禁用。你能告诉我我哪里做错了吗？？？:-)

感谢您的帮助！！！:-)

我的打字稿代码如下。

 selectedAll: any;
 selectedAllSecondname: any;

 this.name = [ {name: 'as', value: 'as', selected: false },
                {name: 'bs', value: 'bs', selected: false },
                {name: 'cs', value: 'cs', selected: false } ];
 this.Secondname = [ {name: 'dd', value: 'dd', selected: false },
                {name: 'ee', value: 'ee', selected: false },
                {name: 'ff', value: 'ff', selected: false } ];
 this.Thirdname = [ {name: 'gg', value: 'gg', selected: false },
                {name: 'hh', value: 'hh', selected: false },
                {name: 'ii', value: 'ii', selected: false } ]; …

我正在使用 angular 6，但无法在选择框中将所选选项显示为默认值，

HTML包括，

<select class="form-control selectBox" name="username" #username="ngModel" required ngModel>
<option disabled selected>Select User Name</option>
<option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
</select>

:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  userList: any = [
    {
      "name" : "Test User"
    },
    {
      "name" : "Hello World"
    },
    {
      "name" : "User Three"
    }
  ]
}

它在选择框中默认显示空值。

如何在行中的选择框中将所选选项显示为默认值？

<option disabled selected>Select User Name</option> …

我有一个从我的一个组件传递的 ng-template，我有一个占位符来接受传递到我的组件上的 ng-template，如下面的 ngTemplateOutlet 所示。

<div>
<form novalidate #myForm="ngForm">
  <ng-container>
    <ng-template [ngTemplateOutlet]="myTemplate">
    </ng-template>
  </ng-container>
</form>
</div>

<!-- this template i am passing it from one of my other components -->
<ng-template #myTemplate>
  <input type="text" name="myInput" placeholder="Input"
    [(ngModel)]="inputModel" required/>
</ng-template>

这里的问题是我的 form('myForm') 忽略了传递的 ng-template 即使它被标记为需要。我如何确保我的 ngForm 考虑传递的 ng-template

我使用了 angular material(" @angular/material": "7.1.0 ") mat-select box 然后我使用了表单控件而不是 ng 模型，现在的问题是我无法在加载组件时设置该值。我需要将列表中的第一个值设置为 mat-select 框，我试过了，但我不能这样做。

我在 stackblitz 创建了一个代码，这里是链接：https ://stackblitz.com/edit/angular-zt1a9f

请帮助我。

我创建了带有文本输入的简单反应式表单，当提交表单时，我想传递来自文件输入的图像。每次我谷歌我得到教程，他们告诉我如何上传文件，但它是在没有其他输入字段的情况下完成的。我明白如何做到这一点，我不明白如何在一次提交中同时提交我的表单和文件输入。

在我的场景中，我不应该使用响应式表单，而是简单地new FormData()将每个输入附加到其中吗？

如果我能做到，请给我一个简单的例子。

编辑：如何在 Angular2 反应形式中包含文件上传控件？这不是答案。回答市场没有随反应形式一起发布文件，它是单独发布文件。

我有 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'
     }
  }
}

当我尝试使用带有控件的表单时，出现此错误。

 Type 'AbstractControl' is missing the following properties from type 
'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState

表格代码

  this.checkoutForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
      lastName: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
      phoneNumber: ['', [Validators.required, Validators.pattern('[0-9]+')]],
      address: ['', [Validators.required, Validators.maxLength(100)]],
      pinCode: ['', Validators.required]
    });

html

<input type="text" 
name="firstName"
[formControl]="checkoutForm.controls['firstName']" 
value="" 
placeholder="" 
autocomplete="off"      
>

当我的表单加载输入中的默认值时

,required(control) { return isEmptyInputValue(control.value) ? {'必需'：真}：空；}

我设置模板的方式如下所示

<form [formGroup]="SvgFormData" (ngSubmit)="onSubmit()">


    <section class="text-control-section">

        <label class="control-label">
            <p class="articleText">title:</p>

            <input class="text-control" type="text" formControlName="title" />

        </label>

        <label class="control-label">
            <p class="articleText">graphic id:</p>

            <input class="text-control" type="text" formControlName="graphicId" />

        </label>

    </section>


</form>

该组件FormGroup通过@Input(). 我最终制作了一个应用程序，用于解析 SVG 并将其以 JSON 格式保存到我的数据库中。解析器返回一个数据对象，我将其传递给自定义函数以FormGroup在填充FormControls. 我希望能够在将这些数据保存到数据库之前对其进行编辑，这就是为什么即使它在技术上已经完成，我也费心把它做成表格。顶级函数看起来像这样。

export function CreateGraphicObjectForm(data?: OvaadSvgDataObject): FormGroup{
    let graphicObjectForm: FormGroup = new FormGroup({
      title          : new FormControl([(data ? data.title     : ''), Validators.required]),
      graphicId      : new FormControl([(data ? data.graphicId : ''), Validators.required]), …