标签: angular-forms

我正在尝试通过属性绑定设置日期类型输入的默认值。

首先我在 app.component.ts 中创建了一个新的 date 对象，然后将[value]date的属性绑定到currentDateapp.component.ts 中的属性。但它不起作用

// 表单模板

<section class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Add a Task</div>
    <div class="panel-body">
      <form class="form-horizontal" [formGroup]="taskForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="title" class="col-sm-2 control-label">Title *</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="taskTitle" placeholder="Title of Task" formControlName="taskTitle">
          </div>
        </div>
        <div class="form-group">
          <label for="description" class="col-sm-2 control-label">Description *</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="description" placeholder="Enter Your Description" formControlName="description">
          </div>
        </div>
        <div class="form-group">
          <label for="date" class="col-sm-2 control-label">Date of Completion *</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" …

编辑：我发现是什么原因引起的问题；我现在正在寻找一种解决方案，以解决这一问题。

注意：此问题在开发人员模式下发生（即，不是prod，并且未使用aot）

我从这里使用“更新”解决方案：

/sf/answers/3242683041/

解决子组件中的输入未更新表单上的有效标志的问题。它可以在一个相当简单的测试项目中工作，但是当将其移至我们的真实项目时，会引发以下错误：

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for NgForm!
Error: No provider for NgForm!
    at ZoneAwareError (http://192.168.2.34:4200/vendor.bundle.js:153804:33)
    at injectionError (http://192.168.2.34:4200/vendor.bundle.js:1378:90)
    at noProviderError (http://192.168.2.34:4200/vendor.bundle.js:1416:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.2.34:4200/vendor.bundle.js:2858:19)
    at ReflectiveInjector_._getByKeyDefault (http://192.168.2.34:4200/vendor.bundle.js:2897:25)
    at ReflectiveInjector_._getByKey (http://192.168.2.34:4200/vendor.bundle.js:2829:25)
    at ReflectiveInjector_.get (http://192.168.2.34:4200/vendor.bundle.js:2698:21)
    at resolveNgModuleDep (http://192.168.2.34:4200/vendor.bundle.js:9701:25)
    at NgModuleRef_.get (http://192.168.2.34:4200/vendor.bundle.js:10771:16)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11259:45)
    at _createProviderInstance (http://192.168.2.34:4200/vendor.bundle.js:11102:20)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11238:56)
    at createClass (http://192.168.2.34:4200/vendor.bundle.js:11129:32)
    at createDirectiveInstance (http://192.168.2.34:4200/vendor.bundle.js:10960:37)
    at createViewNodes (http://192.168.2.34:4200/vendor.bundle.js:12401:53)
    at ZoneAwareError (http://192.168.2.34:4200/vendor.bundle.js:153804:33)
    at injectionError (http://192.168.2.34:4200/vendor.bundle.js:1378:90)
    at noProviderError (http://192.168.2.34:4200/vendor.bundle.js:1416:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.2.34:4200/vendor.bundle.js:2858:19) …

我正在构建一个 Angular 5 表单。我需要在我的表格（电子邮件或电话）上提供联系信息。需要电子邮件地址或电话号码，但不能同时提供。我将如何为这种情况创建自定义验证器？从文档来看，验证器似乎只负责一个控件，而我的验证器需要知道多个控件来检查它们的所有值。

ngOnInit() {
   this.form = this.formBuilder.group({
       'name': [null, [Validators.required]],
       'email': [null, []], // A user can provide email OR phone, but
       'phone': [null, []], // both are not required. How would you do this?
   });
}

我有这些领域：

field1
field2
field3
field4

this.form = this.formbuilder.group({
  'field1' = ['', [<control-specific-validations>]],
  'field2' = ['', [<control-specific-validations>]]
 }, { validator: isField1GreaterThanField2Validator}
 });

我需要更多验证：

- field3.value must be greater than field4.value
- field3.value must be greater  than field2.value + 1
- field4.value must be less than field1.value

您如何将这些新的验证要求集成到构建的表单中？

我确实不希望做的是建立一个

formControl.valueChanges.subscribe(value => { });

对于每个字段，然后在那里有很多 if/else。

然后我可以删除整个反应式表单模块，使用 2way-databinding 并在验证表达式为真时在 ui 中呈现错误字符串。

我有一个简单的搜索组件，其中包含带有2个元素的反应形式：

• 文字输入（搜索任意匹配的文字）
• 复选框（包括/排除已删除的结果）

到目前为止，我使用它myFormGroup.valueChanges.subscribe(...)来执行搜索方法。

现在的问题是，我想对文本输入进行反跳操作。同时不要取消反跳复选框，因此单击该复选框时，搜索方法将立即执行。

valueChanges.debounceTime(500)当然，使用will会反跳整个表单。那不是我想要的

这是一个简化的示例。实际形式还有更多输入。有些应该去抖动，有些则不应该。

有没有简单的方法可以做到这一点？还是我必须分别订阅每个表单控件？

很高兴看到您是如何解决此问题的。

提前致谢。

编辑：代码

export class SearchComponent {

  myFormGroup: FormGroup;

  constructor(fb: FormBuilder) {
    this.myFormGroup = fb.group({
      textInput: '',
      checkbox: false
    });
  }

  ngOnInit() {
    this.myFormGroup.valueChanges.subscribe(val => {
      // debounce only the textInput,
      // and then execute search
    });
  }

}

我需要帮助使行仅在选中复选框时才启用。应该禁用默认行，但是仅选中复选框时，将启用该行。这是我的代码的链接

链接代码

  patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
      rows.push(this.fb.group({
        checkbox_value: [null],
        material_id:  new FormControl({value: x.id, disabled: true}, Validators.required),
        material_name: x.name, 
        quantity: [null, Validators.required]
      }))
    })
      })

  }

我是Angular的新手，并尝试从以下示例扩展示例代码：Angular 4 Form FormArray添加一个按钮以添加或删除表单输入行

如果在下拉菜单中选择了某个选项，则该选项的新选项应可表示。我到此为止没有问题，但是为那些“较低层选项”实现formControlName标记使我出错：

ContentComponent.html：56错误错误：找不到路径为'inhalt-> 0-> optionsKey'（…）的控件

.html中的确切行是：（输入formControlName =“ optionsKey”）

我在其他线程（Angular 2形式“找不到带有路径的控件”）或（Angular 2反应形式：找不到带有路径的控件）或（错误：找不到带有路径的控件：'x'angular 2）中寻找了那些错误，但是它们的问题是基于没有FormBuilder的ReactiveForm-Components创建的。我使用Formbuilder创建了我的所有ReactiveForm-Components，您将在我的代码中看到它们。

我可能错过了某件事还是做错了方向？

content.html

<h3 class="page-header">Formular-Abschnitt hinzufügen</h3>
<button type="button" (click)="addNewFormControl()" class="btn btn-primary">Neues Formularelement</button><br>
<form [formGroup]="formContent">
  <div>
    <label>Bezeichnung des Abschnittes</label>
    <input formControlName="absatz">
  </div>
  <div formArrayName="inhalt">

    <!--
    In the template we are iterating this formarray,
        and that is just the path to the formarray, which is:

        invoiceForm.controls.itemRows.controls

        'invoiceForm' being the complete form object, 'controls' being the content of the form …

使用AngularDart材质包。确实可以在此错误上使用一些帮助：

“（用户名）没有值访问器，或者您的指令列表中可能缺少formDirectives。”

最小设置（formDirectives在指令列表中指定）：

login.html

<form (ngSubmit)="onSubmit()" #form="ngForm">
        <material-input class="username" ngControl="username" [(ngModel)]="username"
            [required]="true"
            [floatingLabel]="true"
            label="Username">
        </material-input>
</form>

login.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'login',
  styleUrls: const ['style.css'],
  templateUrl: 'login.html',
  directives: const [formDirectives,MaterialInputComponent,]
)
class LoginComponent {

  String username;
  void onSubmit() {}
}

我有我正在设置的这种反应形式：

const v = Validators;

this.entryForm = this.formBuilder.group({

  firstName: ['', [v.minLength(2), v.required]],
  lastName: ['', [v.minLength(2), v.required]],
  email: ['', [v.email, v.required]],
  instagram: ['', [v.minLength(2), v.required]],
  company: [''],
  title: [''],
  agree: [false, v.requiredTrue],

});

但是在我打电话之后this.entryForm.reset()，比如：

this.entryForm.reset();

...表单控件entryForm是null，导致错误。即使我尝试重新实例化FormGroup，我仍然会看到null表单控件。我到底做错了什么？

这是完整的组件 TypeScript：

@Component({
  selector: 's2es-enter-page',
  templateUrl: './enter-page.component.html',
  styleUrls: [
    './enter-page.component.sass',
  ]
})
export class EnterPageComponent extends AbstractPageComponent implements OnInit {

  entryForm: FormGroup;
  inited = false;

  constructor(
    private readonly pageService: PageService,
    private readonly http: HttpClient,
    private …

所以我一直在浏览互联网，每个人都说相同的话，那就是我必须在appmodule.ts中添加导入，但是我已经添加了导入，但是我仍然遇到相同的错误。

错误是：

Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("
        <ion-col>

            <form novalidate [ERROR ->][FormGroup]="form" (ngSubmit)="addUser(form)">

                <ion-title class="center">Registr"): ng:///AppModule/RegisterPage.html@8:33

Register.html（https://ghostbin.com/paste/8wn3q）

Register.ts（https://ghostbin.com/paste/3sxcz）

Appmodule.ts（https://ghostbin.com/paste/wgmxd）