标签: angular-formbuilder

我在角度2/4中使用了表单构建器,但现在我在角度6中使用它.我已经看到了这个问题(不能绑定到'formGroup',因为它不是'form'的已知属性)但是它是针对角度2.我对角度4完全相同,但我得到了这个错误.请帮忙:我的代码是:

app.module.ts :(我已导出FormsModule和ReactiveFormsModule):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ], …

我看到角度形式有以下方法registerControl()，但我无法真正理解它的用法。
有人有一个很好的解释和用例吗？

我感觉我错过了一些可能有用的东西。

谢谢你的帮助。

编辑

我已经阅读了角度解释但无法理解

我有一个包含很多表单控件和一些控件的验证器的表单，例如：

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

如何添加不验证控件的另存为草稿按钮？或删除它们？

我尝试了很多示例，例如：

saveDraft() {
   this.addProjectForm.controls.title.clearValidators();
   this.addProjectForm.controls.title.setErrors(null);
   this.addProjectForm.controls.title.setValidators(null);
}

要么

saveDraft() {
   this.addProjectForm.controls['title'].clearValidators();
   this.addProjectForm.controls['title'].setErrors(null);
   this.addProjectForm.controls['title'].setValidators(null);
}

但没有任何效果..

我有一个自定义异步验证器，我想updateOn: 'blur'使用FormBuilder以下方法设置属性：

myForm = this.formBuilder.group({
   email: ['', [Validators.required], [this.myAsyncValidator]]
   // ...
});

我试过这个，但它不起作用：

email: ['', [Validators.required], [this.myAsyncValidator, {updateOn: 'blur'}]]

笔记

我不想像下面这样手动创建表单控件实例：

myForm = new FormGroup({
    email: new FormControl('', {asyncValidators: [this.myAsyncValidator]}, updateOn: 'blur')
});

表单数组值更改不起作用。我无法控制订阅者方法内的值。下面是我的基本表单数组代码。

ordersData = [
 { id: 100, name: 'order 1' },
 { id: 200, name: 'order 2' },
 { id: 300, name: 'order 3' },
];

this.formGroup = this.formBuilder.group({
      testControl: this.formBuilder.array([])
  });

 get formGroupControl() {
    return (this.formGroup.get('testControl') as FormArray);
  }

 private addFormControl() {
    this.ordersData.forEach((o, i) => {
      (this.formGroup.get('testControl') as FormArray).controls.push(this.formBuilder.control(''));
    });
  }

我在 ngOnInit() 中调用了这个 addFormControl() 函数，如果我尝试使用以下方式查看值更改

this.formGroup.get('testControl').valueChanges.subscribe(value => {
      console.log('log', {value});
    });

该控制台无法正常工作..带我了解处理表单数组的正确方法

当我通过以下方式获取反应形式的值时有什么区别：

this.someForm.controls['firstName'].value
this.someForm.get('firstName').value

public someForm: FormGroup = this.formBuilder.group({
  firstName: ['', Validators.required],
});

this.someForm.controls['firstName'].value
this.someForm.get('firstName').value<br>

上面是我的表单以及从表单获取值的两种不同方法。但是两种方式之间有什么区别（如果有的话）？

与表单生成器相比，使用表单控件和表单组有什么优势吗？

我在这里看到的是：

FormBuilder提供了语法糖，可以缩短FormControl，FormGroup或FormArray的创建实例。它减少了构建复杂表格所需的样板数量。

我想知道不使用表单生成器是否有任何优势。我之所以这样问是因为我正在经历一些角度代码，并且看到正在使用表单控件和表单组，并且我想知道如果有更短的方法可以做到这一点，为什么会这样做呢？

那么，相对于其他方式，它有什么优势吗？还是仅仅是偏爱？

我有一个工作角度形式，在两个条件内重复模板，所以我将其移到一个公共位置并定义 ngContainer 通过传递变量来显示值，但是在模板内部，代码无法找出形式我收到以下错误

BulkEditComponent.html:28 ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

模板

 <h5 mat-dialog-title>
   Edit
  </h5>
  <div mat-dialog-content class="body p-10">
    <div *ngFor="let item of keyList;let i=index" [formGroup]="editForm">

      <div class="left" *ngIf="i%2 == 0">
        <ng-container *ngTemplateOutlet="columnData;context:{item:item,group: editForm}"></ng-container>
      </div>

      <div class="right" *ngIf="i%2 == 1">
        <ng-container *ngTemplateOutlet="columnData;context:{item:item,group: editForm}"></ng-container>
      </div>

    </div>
  </div>
  <mat-dialog-actions class="align-right">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-flat-button color="primary" …

我正在创建我的第一个Angular应用，并且在开发模式控制台中遇到以下错误：

错误错误：“找不到具有未指定名称属性的控件”

错误错误：“找不到具有路径的控件：'项目->名称'”

错误错误：“找不到路径为：'项目->高度'的控件”

我已经读了几个SO答案（例如this，this this和this），但是我无法指出我做错了什么，我对Angular的经验不足也无济于事。

这是我的组件打字稿代码：

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

@Component({
  selector: 'app-pack-input',
  templateUrl: './pack-input.component.html',
  styleUrls: ['./pack-input.component.css']
})
export class PackInputComponent implements OnInit {
  public boxForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {  }

  ngOnInit() {
    this.boxForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createBox()])
    });
  }

  createBox(): FormGroup {
    return this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      height: ['', [Validators.required, Validators.minLength(3)]],
      width: ['', [Validators.required, Validators.minLength(3)]],
      length: ['', [Validators.required, Validators.minLength(3)]],
      weight: ['', …

我是 angular8，我在表单组内有一个表单数组，但我想检测某个输入的新更改。

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({
        requestfor     : new FormControl(''),
        remarks        : new FormControl('')
    })}

我必须检查 formarray 值中每个值发生变化的数据。但如果我使用，我会收到错误

this.makeForm.value.details.get('requestfor').valueChanges

错误是

ERROR TypeError: Cannot read property 'valueChanges' of undefined

如何获取表单数组值内的值

如何获取该值......