标签: angular-forms

在Angular 4应用程序中使用ngx-bootstrap Datepicker,

我知道通常你可以这样指定日期格式:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">

但是这次我在一个模板驱动的Angular形式里面,所以我的输入没有绑定到myModel上面例子中的变量,但它只是绑定到表单:

<input id="from" name="from"
       bsDatepicker ngModel>

那么在这种情况下如何指定日期格式？

编辑:看起来实现这一点的方法是newVar在组件内创建一个新变量,然后将其绑定到[(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">

不过我想知道是否有更好的解决方案.

我的Angular应用程序中有几个自定义表单控件组件,它们实现了ControlValueAccessor界面并且运行良好.

但是,当markAsPristine()在父窗体上调用时,或直接在我的自定义控件上调用时,我需要更新它的状态:我的自定义控件实际上有内部控制,我也需要调用markAsPristine()它.

那么,我怎么知道什么时候markAsPristine()被控制？

该ControlValueAccessor接口没有成员,与此相关的问题,我可以实现.

我在项目中使用反应式表单，我对表单组验证器有这种奇怪的行为。我做了一个示例来向你展示这个问题

export class AppComponent {
  detailsForm: any;
  constructor(private formBuilder: FormBuilder) {
    this.detailsForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    }, { validator: [this.ValidForm] });
  }
  ValidForm = (formGroup: AbstractControl) => {
    console.log('hello');
  }
}

<form [formGroup]="detailsForm" action="" id="maforme">
  <input type="text" formControlName="firstName">
  <input type="text" formControlName="lastName">
  <button type="button">Save</button>
</form>

输出是

hello app.component.ts:18
hello app.component.ts:18
hello app.component.ts:18
hello app.component.ts:18

我的问题为什么在这种情况下验证器被调用了 4 次？

我正在使用有角度的材料轮廓 mat-form-field 来设计一个表单。我得到了带有边框角半径的默认 mat-form-field 轮廓文本框视图。有什么办法可以去掉outline mat-form-field的边框角半径，转换成方形文本框视图。

我尝试使用以下内容更改角材料 mat-form-field 的默认样式，但它不起作用。

//css

.mat-form-field-appearance-outline .mat-form-field-outline-start 
.alignment{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

//html

<mat-form-field appearance="outline" [hideRequiredMarker]="true" 
class="alignment">
<mat-label>Email Address</mat-label>
<input type="text" matInput placeholder="Enter email address">
</mat-form-field>

我希望轮廓 mat-form-field 没有边框角半径文本框，就像方形文本框 mat-form-field 一样，但获得默认的轮廓 mat-form-field 视图。

在我的角度应用程序中，我将 Id 的默认值添加为0。但是当用户重置表单时，它会被清除。

如何重置表单并保留默认值？

这是我的表格：

this.createForm = this.formBuilder.group({
    'Id': new FormControl({ value: 0, disabled: true }, [Validators.required])
});

我尝试这样：

dismissEditPop() {
  this.createForm.reset();
  this.createForm.setValue({ //setting back not working!!
    Id: 0
  });
  this.modalBackdrop = false;
  this.editPopup = false;
  this.deletePopup = false;
  this.addRowData = false;
}

我有一个有角度的表格，我想对其进行一些验证。现在，当第一次加载文本区域并且我输入违反验证的内容时，它不会显示错误。

当我将焦点转移到其他元素时，就会显示错误。

但是，此后每当出现违规时，都会立即显示错误，而无需更改焦点。

<form [formGroup]="AddEditform" novalidate autocomplete="off">
    <mat-form-field appearance="outline">
        <textarea matInput name="user" formControlName="users" id="user">
        </textarea>
        <mat-error
            *ngIf="!AddEditform.valid && AddEditform.get('users').hasError('maxlength')"
        >
            Exceeded maximum length
        </mat-error>
    </<mat-form-field>
</form>


AddEditform: FormGroup;

constructor(
  private fb: FormBuilder,
) { }

ngOnInit() {

  this.AddEditform = this.fb.group({
    users: [
      '',
      [
        Validators.maxLength(100)
      ],
    ],
  });
}

为什么会发生这种行为？为什么第一次本身，在不需要更改焦点的情况下验证不会发生？

我已经在我的应用程序中实现了 Control Value Accessor，但是在运行该应用程序时，我收到以下错误消息：

ERROR TypeError: dir.valueAccessor.writeValue is not a function
    at setUpControl (forms.js:2578)
    at FormGroupDirective.addControl (forms.js:6318)
    at FormControlName._setUpControl (forms.js:6969)
    at FormControlName.ngOnChanges (forms.js:6892)
    at checkAndUpdateDirectiveInline (core.js:24499)
    at checkAndUpdateNodeInline (core.js:35163)
    at checkAndUpdateNode (core.js:35102)
    at debugCheckAndUpdateNode (core.js:36124)
    at debugCheckDirectivesFn (core.js:36067)
    at Object.eval [as updateDirectives] (AnnouncementInformationListComponent.html:82)

我是这样设置的：

公告信息列表组件.html

<form [formGroup]="_form">
    <div [formArrayName]="item.code">
            <div *ngFor="let controlItem of _form.get(item.code).controls; let ctrlIndex = index"
                    class="form-row"
                    [formGroupName]="ctrlIndex">    
                <div [ngClass]="{'col-8': oneParameter(item), 'col-4': twoParameters(item), 'col-3': threeParameters(item)}"
                    *ngFor="let param of item.parameters; let arrIndex = index">
                    <div [ngSwitch]="param">

                            <input *ngSwitchCase="blabla(param)"
                                    type="text" …

我的组件中有以下代码：

 if (form.controls['minRange'].hasError('min')) {
        form.controls['minRange'].setErrors({ min: true });
 }

我在输入中收到消息“minRange 无效”。但我想将错误消息显示为“P”

'Please enter a 5 digit value'

像 .setErrors 如何在 formcontrol 中设置错误消息。任何人都可以帮助我。谢谢。

我有一个自定义异步验证器，我想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});
    });

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