标签: angular2-forms

如何在输入中显示转换后的值（例如“1(234)567-890”），而没有转换值（'1234567890'）？

是否可以为maskInputEl和制作单独的值maskInput？

我有模板：

   <input #maskInputEl class="spacer" [type]="type"
   [formControl]="maskInput"/>

和自定义组件：

export class MaskInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
    @ViewChild('maskInputEl') public maskInputEl: ElementRef;

    @Input() public mask: any[];

    public maskInput = new FormControl();

    private _oldValue: string = '';

    public ngOnInit(): void {
        this.maskInput.valueChanges
            .subscribe((value: string) => {
                    let valid = this.isValidValueByMask(value, this.mask);
                    if (valid) {
                        this._oldValue = value;
                    } else {
                        value = this._oldValue;
                    }

                    this._onChangeCallback(value);
                    this.onChange.emit(value);

                    this.maskInputEl.nativeElement.value = value; 
                },
                (err) => console.warn(err)
            );
    }

    public toggleActive(value) { …

<form [formGroup]="form">
    <select name="area_id" formControlName="area_id">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select>
</form>

<pre>{{ form.value | json }}</pre>

如果我选择一个选项,则该值将为字符串.如何强制该值为整数？

我有以下表格：

import { Component } from '@angular/core'

@Component({
    selector: 'form1',
    template: `
      <div >
        <form (ngSubmit)="onSubmit(f)" #f="ngForm">
           <input ngControl="email" type="text" id="mail" required>                              
           <input ngControl="password" type="text" id="password" required>
           <input ngControl="confirmPass" type="text" id="confirmPass" required>                                
           <button type="submit">Submit </button>
        </form>
      </div>                    `
})
export class Form1Component{
    onSubmit(form:any){
      console.log(form.value);
    }
}

问题是form.value只有一个空对象并且没有ngControl指令值的迹象。我错过了什么吗？

我在 app.module.ts 中导入了 FormsModule 但我仍然收到此错误。

无法绑定到“ngModel”，因为它不是“input”的已知属性

我已经浏览过类似的帖子，但仍然无法找到解决方案。

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {NgModule  } from "@angular/core";
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [ 
    AppComponent
  ],
  bootstrap: …

如何在给定记录后自动选择 dataTable 中的一行？数据表具有排序列和分页。在给定记录之后，我希望在存在的页面上选择该记录。

我正在处理日历。我想将最大日期设置为今天并禁用未来日期。

HTML

 <div [ngClass]="setClassDOB()">
 <input type="date" formControlName="dob" name="dob">
 </div>

我应该在组件端（TS）做什么？

我从 api 获取字节数组，并且在我的 HTML 页面上应用了图像标签 <img src="data:{{model.asd_logo_type}};base64,{{model.dfgh_logo}}" alt="...">

但我无法显示图像。

请建议我能做什么。

我在我的项目中处理了 10 多个带有许多输入字段的表单。问题是我的字段将空格作为值。至于现在我所做的是在更改时获取字段的值并修剪它并用 0 检查长度。如果是，则抛出“不使用空格”，否则取值。

<input (change)='check($event)'>

check(data){
   if(data.trim() === 0 ){
       console.log('contains empty spaces'   
   }else{
        console.log('contains data') 
   }
}

但是随着字段或表单的增加，这将是一个令人头疼的问题。所以我试图把它作为通用模块。所以我会像服务一样使用它。

注意：验证应该发生在借口上（即）'HelloWorld' 应该抛出错误但'Hello World' 不应该。谁能给我一些想法或建议来解决这个问题..

提前致谢

我正在将 Angular 5 与 Materialise 一起使用，并且我有一个完美运行的日期选择器：

<input materialize="pickadate" 
 type="text" class="datepicker" placeholder="Selecione a Data" 
 [materializeParams]=datePickerParams>

我想在更改此输入日期时调用诸如“dateChanged(date)”之类的方法，例如，我尝试使用 (change)="dateChanged($event)"，但不起作用。

这是我尝试编译时遇到的错误（ng build --prod）：

Error at /angular/src/app/.../xxx.component.html(xx,xxx): Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'.
  Property 'registerOnChange' is missing in type 'AbstractControl'.

有问题的代码（假设）：

        this.myForm = new FormGroup({
            oneField: new FormControl('', [Validators.required,customValidator()])
        });

和 ：

    ngChangeOnefield(event: FormControl){
        // some code...
    }

在我的 html 组件中，我有类似的东西：

<form [formGroup]="myForm" (ngSubmit)="onFormSubmit()">
    <!-- more code -->
    <htmltag (onSelect)="ngChangeOneField(oneField)"/>
    <!-- more code -->
</form>