标签: angular4-forms

我正在尝试在供应商表中添加一个新条目。该表还有另一个与之链接的表，其中存储了与每个供应商的合同。所需的功能是以相同的形式提交新供应商和合同的数据，但我无法使其工作。

我可以通过以另一种形式单独上传文件来添加新供应商并在合同之后，但不能在同一个提交操作中。

我怎样才能做到这一点？

我的表格是这样的：

<form class="form-material m-t-40" enctype="multipart/form-data">

    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Denumire furnizor </label></h4>
        <input type="text" id="denumire" name="denumire" class="form-control" placeholder="Denumire" [(ngModel)]="furnizor.denumire" #denumire="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-danger"> Cod intern furnizor </label></h4>
        <input type="text" id="cod" name="cod" class="form-control" placeholder="Cod intern" [(ngModel)]="furnizor.cod" #cod="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-success"> Cod de inregistrare fiscala furnizor </label></h4>
        <input type="text" id="codIntern" name="codIntern" class="form-control" placeholder="Cod" [(ngModel)]="furnizor.codIntern" #codIntern="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="adresa" class="label-has-success"> Adresa </label></h4>
        <input …

我正在尝试以 Angular 2+ 反应形式验证出生日期。当所选DOB日期超过100岁时，我想显示错误消息。

前端侧

 <div [ngClass]="setClassDOB()">
 <input class="form-control" type="date"name="dob"formControlName="dob" placeholder="DOB">
 </div>

如果我使用模板驱动的表单，我可以将 FormControl 的引用注入到“错误消息”组件中。请注意 ngModel 指令的使用（请参阅本教程）。

<input type="text" name="myFormControl" #myFormControl="ngModel" ngModel />
<error-message [control]="myFormControl" key="foo.bar" />

这几乎适用于反应式表单（我必须使用 formControlName 指令，但我不能使用 ngModel 的东西）。

<input type="text" formControlName="myFormControl" #myFormControl />
<error-message [control]="myFormControl" key="foo.bar" />

“错误消息”组件正确接收 FormControl（this.control 已设置）但 this.control.valueChanges 未定义，我无法注册更改事件侦听器。

有谁知道一种将 FormControl 引用传递给具有响应式表单的子项的方法，以便我可以注册 valueChange 侦听器？我想缺少的是这个 ngModel 的东西，但我不知道如何以反应形式传递它。

@Component({
    selector: 'error-message',
    ...
})
export class ErrorMessageComponent implements OnInit {
    @Input()
    private control: AbstractControl;
    @Input()
    private path: String;

    ngOnInit() {
        this.control.valueChanges.subscribe(() => hideErrorMessage());
    }
    ...
}

更多背景信息：表单数据的验证逻辑专门在我的应用程序后端实现。验证错误作为简单的映射条目发送。每个键等于数据模型的一个字段的路径。我编写了一个“错误消息”组件，它将这样一个键作为参数并订阅某些服务，以便它可以在发生验证错误时接收验证错误。我希望这个组件还保留对其父级（即 FormControl）的引用，以便在发生错误时更新其样式，并在用户更改他放入 FormControl 的内容时重置错误消息。

我们想要解耦事物，以便父级对其子级（“错误消息”组件）一无所知。

我的表单是一个使用 FormBuilder 构建的简单反应式表单。

... …

我正在阅读 angular.io 的文档（反应形式是同步的），试图理解反应形式（它们是如何同步的，模板驱动的形式是如何异步的）。

但是文档对 example 没有足够的解释。谁能帮我理解模板驱动的表单是如何异步的，反应式表单是如何同步的？

我试图在互联网上浏览很多博客，但没有得到答案。

任何帮助表示赞赏。

我正在尝试以我的第一个Angular形式获取输入字段的值，但是它始终是未定义的，而且我不知道为什么。我正确地导入了FormsModule，并且可以很好地引用表单对象，因此我必须缺少明显的东西。

我的组件HTML

<form #searchValue='ngForm' class="" (ngSubmit)='submitSearch(searchValue)'>
  <div>
    <input type="text" name="q" placeholder="search">
  </div>
</form>

和我的组件ts方法（缩短）

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'google-search',
  templateUrl: './google.component.html',
  styleUrls: ['./google.component.css']
})

export class GoogleComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

  submitSearch(formData) {
    console.log(this.searching);
    console.log(formData.value.q);    
  }
}

有什么想法为什么呢？

我开发了一个自定义组件（app-mat-avatar）用作头像选择（见图）。它由一个带有图片和 2 个按钮的大 div 组成。一个是编辑，另一个是擦除。我按照创建自定义表单字段控件中的Angular 指南构建了它

这是我使用它的形式：

<form name="detailsForm" [formGroup]="detailsForm" (submit)="submitDetails($event)">
    <app-mat-avatar [size]="150" formControlName="photoURL"></app-mat-avatar>
    <input matInput type="email" placeholder="Email" formControlNamesss="email" disabled value="{{detailsForm.get('email').value}}">
.....

    <div flex layout="row" layout-align="end center" class="fullWidth pad-right-sm">
        <button mat-button mat-raised (click)="resetDetails()" class="push-right-xs" [disabled]="busy">Reset</button>
        <button type="submit" mat-button mat-raised-button color="primary" [disabled]="detailsForm.invalid || busy">Save</button>
    </div>
</form>

这是支持表单所在页面组件的代码：

@Component({
  selector: 'app-my-info',
  templateUrl: './my-info.component.html',
  styleUrls: ['./my-info.component.sass']
})
export class MyInfoComponent implements OnInit, OnDestroy {

  detailsForm = new FormGroup({
    uid: new FormControl(''),
    photoURL: new FormControl(''),
    firstName: new FormControl('', [Validators.required, Validators.minLength(2)]), …

根据我之前已经选择的内容，我如何获得默认值。就像我编辑一些东西并且它有一个下拉菜单一样，我可以看到我之前提交的默认值，所以它不会混淆用户。例如，在我的代码中，如果我单击编辑按钮，它会将我重定向到页面并启动下面的“patchValues()”函数，它可以从供应商列表中进行选择。我想要的是，如果我点击编辑按钮，我可以在选择选项中看到一个默认值

TS

patchValues() {
    let suppliers = this.myForm.get('suppliers') as FormArray;
    this.material.suppliers.forEach(supplier => {
      suppliers.push(this.fb.group({
       supplier_id: supplier.name,
     }))
    })
  }

HTML

<tr *ngFor="let row of myForm.controls.suppliers.controls; let i = index" [formGroupName]="i">
            <td>
              <select formControlName="supplier_id" class="col-md-12" >
                <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
                  {{supplier.name}}
                </option>
              </select>
            </td>
   </tr>

I have a reactive form created in component and some formControls defined on it.

Now i need to disable one of the radio button from a radio button group based on some condition.

How do i do it while creating formControl?

PFB the code snippet:

createForm() {
this.heroForm = this.fb.group({
  confirmActionRadioGrp: this.fb.group({
            updateAction: new FormControl({ value: '' })
        })

  });
}

inside my template:

    <div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input …

我创建了一个自定义输入控件。我不想创建任何自定义验证。我想使用默认必需的minLength，maxLength等。我知道我可以这样做

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

但是我无法从父组件发送表单引用。我如何在文本框组件内使用setValidator。

// input-box.component.ts    
    import { Component, Input, forwardRef } from '@angular/core';
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';


    @Component({
      selector: 'app-input-box',
      template:`<label >{{inputdata.label}}</label><br>
      <input type="text" required #textBox [value]="textValue" (keyup)="onChange($event.target.value)" />`,
      styleUrls: ['./input-box.component.less'],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => InputBoxComponent),
          multi: true
        },
        /*{
          provide: NG_VALIDATORS,
          useExisting: forwardRef(() => InputBoxComponent),
          multi: true,
        }*/]
    })
    export class InputBoxComponent implements ControlValueAccessor {
      @Input() inputdata: any;
      private textValue: any = '';

      onChange(value) {
        this.textValue = value;
        this.propagrateChange(value);
      }

      private …

我需要使用反应式 angular 4+ 检查密码和确认密码字段是否具有相同的值。我确实在这里看到了很多相同的答案，Angular 4 表单验证重复密码，将验证器中的字段与 angular 4 进行比较，但似乎没有一个对我有用。

面对问题，如何在反应式方法中结合确认电子邮件和确认密码验证器。

确认电子邮件或确认密码工作正常。

   this.addEmpForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'cemail': new FormControl(null, [Validators.required, Validators.email]),
      'password': new FormControl(null, Validators.required),
      'cpassword': new FormControl(null, Validators.required)
    }, this.pwdMatchValidator);
  }

  emailMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('cpassword').value
      ? null : { 'mismatch': true };
  }

  pwdMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('cpassword').value
      ? null : { 'mismatch': true };
  }

HTML

<span class="help-block" 
              *ngIf="addEmpForm.get('cemail').touched && cemail?.errors || 
              addEmpForm.get('cemail').touched && addEmpForm.errors?.mismatch"> …