标签: angular-reactive-forms

formControl我有一个包含可编辑数据（将是对象）和只读数据（将是 HTML 上的静态文本）组合的数组。有没有办法在 Angular 中做到这一点？我也可以使用FormArrays和FormGroups添加这个静态文本，但感觉不对。让我用一个例子来详细说明这个问题：

假设我有一个 JSON 对象，如下所示：

itemArray = [{
  title: 'fancy item', // not a member of the form (read-only)
  quantity: 0 // member of the form (editable)
},
{
  title: 'weird item', // not a member of the form (read-only)
  quantity: 1 // member of the form (editabe)
}
]

我使用 FormArrays 作为quantity项目字段。

this.formItems = new FormArray([
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
          title: new FormControl('Fancy item') // Readonly …

在构造函数中添加表单构建器时。我一直收到错误。我已经在 app.module 中添加了 ReactiveFormsModule 。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
    selector: 'app',
    template: require('./app.component.pug'),
    styles: [require('./app.component.scss')]
})
export class AppComponent {
    private loginForm: FormGroup;
    constructor(private fb: FormBuilder) {}
}

示例 app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})

这是错误：

我无法为表单中的“datetime-local”元素赋值。

模板中的代码：

打字稿文件中的代码：

let dateTime : Date = new Date();

this.testForm = this.formBuilder.group({    
  'dateTime': new FormControl(dateTime),
});

结果：

使用打字稿将日期和时间分配给 datetime-local 的正确方法是什么

我试图显示在文本框中输入的值，但收到“错误 TypeError：无法读取未定义的属性‘值’”错误。

这是我在组件中注册的 formControls：

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


@Component({
  selector: 'app-site-reset',
  templateUrl: './site-reset.component.html',
  styleUrls: ['./site-reset.component.scss']
})
export class SiteResetComponent {
  siteResetForm = new FormGroup({
    attuid: new FormControl(''),
    contactNumber: new FormControl(''),
    vendor: new FormControl(''),
    severity: new FormControl(''),
    siteNum: new FormControl(''),
    reasonSelect: new FormControl(''),
    other: new FormControl(''),
    pilot: new FormControl(''),
    alarms: new FormControl(''),
    adjacent: new FormControl(''),
    reset: new FormControl(''),
    anr: new FormControl(''),
    tickets: new FormControl(''),
    other_action: new FormControl(''),
    date: new FormControl(''),
  }); …

我正在使用角度动态表单制作角度应用程序，其中我通过 JSON 加载动态表单的数据。

JSON 有两部分，例如第 1 部分和第 2 部分，

  jsonDataPart1: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    }
  ]

  jsonDataPart2: any = [
            {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_one",
          "label": "Property One",
          "type": "text", …

我正在尝试在反应式表单中使用材质日期选择器，但由于更改连接到日期选择器的输入值不会更新表单控件的值，因此我遇到了问题。

因此，这会导致各种问题，例如不正确的验证错误，例如尽管已填充输入但仍显示所需的错误，以及表单未分类为有效，这意味着按钮在应该启用时未启用。

组件.html

<form [formGroup]="invoiceForm">

  <mat-form-field appearance="outline" floatLabel="always">

    <mat-label>Date</mat-label>

    <input matInput formControlName="date" [matDatepicker]="selectDate" placeholder="DD/MM/YYYY">

    <mat-datepicker-toggle matSuffix [for]="selectDate"></mat-datepicker-toggle>

    <mat-datepicker #selectDate></mat-datepicker>

    <mat-error *ngIf="form.date.errors.required">Date is required</mat-error>

    <mat-error *ngIf="form.date.errors.validDate">Invalid date</mat-error>

  </mat-form-field>


  <button mat-raised-button (click)="saveInvoice()" [disabled]="!invoiceForm.valid || !items.length">Save</button>

</form>

组件.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable, from } from 'rxjs';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MatDatepickerInputEvent } from '@angular/material';
import * as moment from 'moment';

import { DataService } …

我一直在尝试使用带有反应形式的角形材料的单选按钮，同时使用厕所，但没有成功。我成功地使用了 html 本机单选按钮，但是当我更改为 mat-radio-buttons 时，在为“第二个”控件选择一个值时，它将为第一个控件设置相同的值。

我在这里做错了什么？下面的演示

https://stackblitz.com/edit/angular-68mtq8

我有一个像这样设置的简单反应形式

constructor(private scheduleService: ScheduleService, fb: FormBuilder) {
this.searchForm = fb.group({
  from: ["", Validators.required],
  to: ["", Validators.required],
  date: ["", Validators.required]
});
}

我想通过单击调用清除函数的按钮来清除表单字段。我的清除功能目前不起作用，看起来像这样

clear() {
console.log("Reset all search form fields to null.");

this.searchForm.from = "";
this.searchForm.to = "";
this.searchForm.date = "";
}

使用角度反应表单时清除表单输入字段的正确方法是什么？如何通过使用单个语句重置所有表单字段而不是单个字段来实现此目的？

我有一个动态创建的表，它显示的数据如下：

<table>
  <tr *ngFor="let product of products">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" value=""></td>
  </tr>
</table>

我读到处理这个问题的适当方法是使用 FormsArray。但我也读到，使用 FormsArray 的正确方法是获取其控件数组：

<table>
  <tr *ngFor="let product of this.form.get('productCollection').controls; let i = index;"
     [formGroupName]="i">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" formControlName="name"></td>
  </tr>
</table>

问题是我无权访问此处的描述值。我还没有找到一种方法将其作为元数据传递给控件，​​以便我可以显示它。

那么问题是，对于这样的事情，哪种方法是正确的？是FormArray吗？它是一个 FormGroup 中的一组 FormControl 吗？或者每个表单控件都需要单独存在吗？我愿意接受有关如何开展这项工作的建议。

当我想在 Angular 中创建自定义表单控件时，我需要实现ControlValueAccessorwhich DefineswriteValue(value:any): void函数。

现在想象一下，由于其内部工作原理，自定义组件仅接受仅包含数字的字符串。它不能接受任何其他东西，因为它不能用它做任何有意义的事情。

当有人调用formControl.setValue()无效值时的问题：

• 该值formControl（null或无效输入）应该是什么？
• 如果输入无效，是否应该writeValue调用onChange回调，以便 Angular 知道该值未被接受？null