标签: angular-forms

Angular Form组件类为：

export class SpecsFilterFormComponent implements OnInit {

  specFilterForm: FormGroup;
  cameraSizeMin = new FormControl("", [Validators.pattern("\s*|[0-9.]*")]);
  cameraSizeMax = new FormControl("", [Validators.pattern("\s*|[0-9.]*")]);

  constructor(private fb: FormBuilder) {    }

  ngOnInit() {

  this.specFilterForm = this.fb.group({
  cameraSize: this.fb.group(
    {
      cameraSizeMin: this.cameraSizeMin,
      cameraSizeMax: this.cameraSizeMax,
    })
});

this.specFilterForm.valueChanges.debounceTime(500).filter(
  formData => this.specFilterForm.valid)
  .subscribe(
    formData => {
      console.log("do something after validation")
    });
  }
  }

我想添加一个验证以确保cameraSizeMax> = cameraSizeMin，以及如何在控件的cameraSizeMin和cameraSizeMax中应用此验证。

我有两个自定义validator的reactive form，我叫下面的函数来创建组件构造函数形式：

private createForm(): void {
this.passwordUpdateForm = this.formBuilder.group({
    newpassword : [null, Validators.required],
    passwordconfirm: [null, Validators.required]
},
{
    validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule] // validation method

});

}

PasswordValidation是一个具有以下两个功能的类

    export class PasswordValidation {

     public  static PasswordMatch(control: AbstractControl) {
        let password = control.get('newpassword'); // to get value in input tag
        if(password){
            let confirmPassword = control.get('passwordconfirm').value; // to get value in input tag
            if (password.value !== confirmPassword) {
                control.get('passwordconfirm').setErrors({ ['passwordmatch'] : true});
            }else {
                return null;
            }
        }
    } …

有一个自定义的输入组件，它以反应形式用于验证：

@Component({
    moduleId: module.id.toString(),
    selector: 'custom-select',
    templateUrl: 'custom-select.component.html',
    styleUrls: ['custom-select.component.css']
})
export class CustomSelectComponent {
    @Input() public items: SelectModel[];
    public model: SelectModel;
    constructor(private customSelectService: CustomSelectService) {
        this.customSelectService.Selected.subscribe((data: SelectModel) => {
            this.model = data;
        });
    }
    public newSelect(select: SelectModel): void {
        this.customSelectService.updateSelected(select);
    }
}

效果很好，我正在custom-select以反应形式使用，并希望按如下所示进行验证：

<custom-select id="country" [items]="selectItems" formControlName="country"></custom-select>
<div *ngIf=" myFrom.controls['country'].invalid && (myFrom.controls['country'].dirty 
             || myFrom.controls['country'].touched) " class="ha-control-alert">
    <div *ngIf="myFrom.controls['country'].hasError('required')">Country is required</div>
</div>

这就是我在组件中声明表格的方式

this.myFrom = this.formBuilder.group({
    country: [null, Validators.required],
})

但是当我添加formControlName验证时，会出现错误，提示名称为'country'的表单控件没有值访问器。我该如何处理？

我目前正在尝试扩展Angular5的FormGroup类型，以实现一个自定义方法，以接收模型状态错误并将其显示到另一个自定义组件中。

不幸的是，我收到的信息不那么丰富：
Error: ServerValidatedForm/src/platform/svalidated/group.component.ts:30:1: Error encountered in metadata generated for exported symbol 'SVFormGroup': ServerValidatedForm/src/platform/svalidated/group.component.ts:33:22: Metadata collected contains an error that will be reported at runtime: Expression form not supported.

我怀疑TypeScripting本身缺少某些东西。值得高兴的是，我已经清理了node_modules，从项目中删除了所有元数据，然后再次进行了编译，每次遇到相同的错误时，都将重新进行编译。

我正在使用：
"@angular/animations": "5.0.1", "@angular/cli": "^1.5.0", "@angular/common": "5.0.1", "@angular/compiler": "^5.0.1", "@angular/compiler-cli": "^5.0.1", "@angular/core": "5.0.1", "@angular/forms": "^5.0.1"

重要的代码在这里，任何帮助将是有帮助的：

import { Injectable } from "@angular/core"; import { FormGroup } from "@angular/forms"; import { AbstractControlOptions } from "@angular/forms/src/model";

@Injectable()
export class SVFormGroup extends FormGroup {
  constructor(
    controls: {[key: string]: any},
    validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
    asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null) …

我正在建立一个我总是想要endDate> startDate的组件（html，css，spec.ts，ts）。我按照此链接https://material.angular.io/components/datepicker/overview进行了多个日期选择。

以下是我针对startDate和的HTML endDate：

开始日期：

<div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>

结束日期：

<div class="end-date" fxFlex="50%" fxFlexOrder="2">
           <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
        </div>

现在下面是我validateForm在页面加载时调用方法的角度代码（ts）。

ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

问题陈述：

现在，我需要做的是-如果我选择了某个日期 …

我一直在阅读一些有关变更检测策略的文章，但我对哪些情况下使用推送策略有意义存在一些疑问。基本上我的疑问是当我们嵌套组件时绑定的对象不是不可变的。我有两个嵌套组件，一个父组件和一个子组件，两者都具有推送时的更改检测策略。我将 formGroup 作为输入传递给子组件。

当我将表单设置为在父组件上启用，然后调用 ChangeDetectorRef.detectChanges() （它应该检查更改检测器及其子组件）时，我没有看到子组件上的更改（例如子组件上的 ngIf启用表单时显示内容）。

我做错了什么或者没有很好地理解？

创建了一个更新表单，其中基本上填充了信息。

我想要的是禁用该按钮，直到表单中的信息发生更改

表单组正在使用 valuechanges 来监听信息何时被编辑

但即使我改变使用，形式总是被触及

this.formGroup.markAsUntouched()

表单本身确实记录了我已将其设置为未触及的事实

setFormValues(){
      this.firstNameControl.setValue(user.firstName);
      this.lastNameControl.setValue(user.lastName);
      this.emailControl.setValue(user.email);
      this.userNameControl.setValue(user.userName);
      this.emailControl.setValue(user.email);
  //Tried setting here this.formGroup.markAsUntouched()
}

onFormChanges() {
    return this.formGroup.valueChanges
    .subscribe(val => {
        //Can set here but will always be untouched, as well if I use 
       this.formGroup.markAsUntouched()
        console.log(this.count, this.formGroup.valid, this.formGroup.touched, this.formGroup.dirty)

    });
  }

我知道上面的内容将始终保持不变，但如果我省略它，它会在 init 上执行两次并将表单设置为触摸，因为，我想，来自数据库的信息已加载，已尝试使用计数器 var; 如果 valuechanges 的 counter == 2 （第二次迭代）则 this.formGroup.markAsUntouched()

哪个有效，另一件事是 html 似乎没有注册表单组被禁用

<button class="btn btn-primary btn-complimentary" type="submit" [disabled]="!formGroup.touched">

我有一个表单来更新角度4中现有模型类的字段的一部分.

我需要在当前模型实例上设置setValue,最后将值重新更新.

问题是我只需要更新模型的某些部分,但角形式会返回错误

"Cannot find form control with name 'fieldname'" 

对于我不想编辑的额外字段.

获得所需行为的最佳选择是什么？

我想为我不希望在表单中更新的字段添加隐藏的formControls,但是我们的一些模型非常大,而我们需要用户只编辑它们的一部分.

我必须在最后获得一个更新的模型,用于我们的模型的脏检查和一般更新(与具有多个重复的类相关代码相比,仅用于设置所有formControls的值并从提交时的formControls更新模型)

谢谢.

更新只是为了澄清 - 我想要一个类似于此的行为:

--component.ts
model: Model = someModelWithData;

--component.html
<input type="checkbox" [(NgModel)]="model.FieldOne" />

用户更改FieldOne中的值后,模型仍然已满,但所有其他数据都已更改,但FieldOne已更改.

我有一个工作角度形式，在两个条件内重复模板，所以我将其移到一个公共位置并定义 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" …

我在对话框中使用角度形式来收集字符串。在下面的示例中，它们是 acontact和 a reason。当我使用标签时，一切都按预期工作input，但我无法将 formController 绑定到textarea. 我在文档方面没有运气。我错过了什么吗？一个已知的解决方法？

X.component.html

  <form [formGroup]="myForm">
      <input formControlName="contact" placeholder="contact" required/>
      <textarea placeholder="reason" formControllerName="reason" required></textarea>
  </form>

X.组件.ts

import { Component } from "@angular/core";
import { FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'X',
  templateUrl: 'X.component.html',
  styleUrls: ['./X.component.scss']
})
export class XDialog{
  myForm: FormGroup;

  constructor(
      private fb: FormBuilder
  ){
    this.myForm = this.fb.group({
      contact: ['', Validators.required],
      reason: ['', Validators.required],
    });
}