相关疑难解决方法(0)

我有一个简单的表单,需要验证输入的开头和结尾是否不是空格.

在HTML5中,我将这样做:

<input type="text" pattern="^(?!\s|.*\s$).*$">

新Angular 2 ngControl指令中验证模式的正确属性是什么？官方Beta API仍缺乏此问题的文档.

我需要美国电话号码格式的常规快递.我想用JavaScript替换电话号码字符串到美国电话号码字符串格式.

var number = "4031234789";

我想以下面的格式掩盖它: -

number = number.mask('(000) 000-0000');

任何人都可以在JavaScript中向我展示正则表达式吗？

我已经看到许多在 Angularjs 中格式化电话号码输入字段的解决方案，但我在 Angular 7 上找不到任何内容。我本质上想要的是让用户在文本字段中输入以下内容：

123456789

以及用于将输入格式化为的文本字段：

(123) 456-789

我该怎么做呢？我找到了以下正则表达式来验证它：

^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$

我已经按照https://auth0.com/blog/angular-2-series-part-5-forms-and-custom-validation/实现了表单验证

 <input class="form-control"
               type="text"
               name="phone"
               autocomplete="off"
               placeholder="(XXX)-XXX-XXXX"
               mask=""
               [disabled]="disabled"
               [(ngModel)]="candidate.phone"
               ngControl="phone"/>

...

...

static phone(control: Control): ValidationResult {

    let URL_REGEXP = /^\(\d{3}\)-\d{3}-\d{4}$/i;

    if (control.value && (control.value.length <= 5 || !URL_REGEXP.test(control.value))) {

        return {"phone": true};
    }

    return null;
}

加上这个元素我已经实现了输入掩码目录:http://pastebin.com/wRzHSsVy

出现以下问题:输入电话号码时,验证首先执行,然后输入掩码目录.因此验证器检查的数据和输入掩码目录格式化的数据不同.例如,验证器上的电话号码是(888)-888-88882,掩码将数字转换为以下格式(888)-888-8888,但验证器已经工作并在掩码激活之前指出了错误.

我正在尝试输入输入字段格式/掩码值,同时让实际模型保留原始(或格式不同)的值.我正在考虑电话号码等,但为了简单起见,我使用大写字母进行测试.

我尝试了很多东西,希望它像指令一样简单.但似乎无法使显示值偏离表单值.

plunk:http://plnkr.co/edit/VH5zn4S8q28CBpFutBlx？p = preview

这是指令:

@Directive({
  selector: '[uppercase]',
  host: {
    '(input)': 'onInputChange()',
  }
})

export class UppercaseDirective {

  constructor(private model: NgFormControl) { }

  onInputChange() {
    let newValue = this.model.value.toUpperCase();
    this.model.viewToModelUpdate(newValue);
    this.model.valueAccessor.writeValue(newValue);
  }

}

和形式:

<form [ngFormModel]='myForm'>
  <input [ngFormControl]='myForm.controls.field' uppercase>
  <div>
    {{ myForm.value.field }}
  </div>
</form>

我有一个要显示为货币的输入。我只允许小数点后两位，并且只允许数字，并在必要时自动添加逗号。基本上，如果用户键入“ 12345”，我希望输入自动显示为“ 12,345.00”。“ 12,345”也是可以接受的，但是如果他们输入“ 12345.5”，则需要显示为“ 12,345.50”。我试图使用管道来完成此操作，并决定使用“数字”管道，因为我不想显示货币符号（输入之前我已经有一个美元符号作为标签）。

这是我的代码：

<input [ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)" class="form-control" id="Amount" name="Amount" tabindex="4" type="number" autocomplete="off">

我有一些问题。

1. 当我键入数字时，它会自动在末尾添加一个小数和两个0，这很好，但是它还会在其末尾添加光标，因此，如果我键入“ 55”，而不是显示为“ 55.00” ，则显示为“ 5.01”（我假设它将解释为5.005，然后将其四舍五入为5.01）。如何防止光标移到最末端，以便用户可以在看到期望结果的同时自然键入？
2. 该过滤器实际上并没有将输入限制为两位小数。如果输入“ 1234”，它将显示为“ 1.00234”。它还将允许我添加多个小数点。如何将其限制为只有小数点后两位的小数点？
3. 用不正确的输入来打破这个管道真的很容易。例如，如果用户输入字母，我将在控制台中看到如下错误：

管道'DecimalPipe'的无效参数'11 .00a'

发生此错误后，过滤器将完全停止工作。

如果将输入设置为，type="number"并输入1234，则值将为1,234，但是输入将消失，并且我将在控制台中收到以下消息：

指定的值“ 1,234”不是有效数字。该值必须与以下正则表达式匹配：-？（\ d + | \ d +。\ d + |。\ d +）（[eE] [-+]？\ d +）？

使用JQuery Inputmask在限制/显示输入方面给了我想要的结果，但是它破坏了ngModel并将值设置为空，因此这对我来说不是一个选择，除非有人知道解决方法。

我可以对管道进行一些更改以获得我想要的结果吗？我该如何工作？

我可能会犯这个错误,因为我做的很简单,但我的解决方案很容易出错.

我想要做的就是在输入文本发生变化时(按下键时)对第三方组件执行过滤.

第一种方法不起作用:

<input type="text" placeholder="Name Fitler" [(ngModel)]="NameFilter" (keydown)="keyDown($event)" />

问题是在使用最新字符更新NameFilter之前执行key down,因此我的过滤器后面是一个字符

第二种做法不起作用

keyDown(event:KeyboardEvent){
    var input = <HTMLInputElement>event.srcElement; 
    this.NameFilter = input.value + event.key; // <-- have to add the latest character
    this.filterChanged();
}

这种作品但容易出错.input.value没有最新的字符,所以我添加它但需要担心奇数键等.如果可以,我想避免使用keyCode过滤.

还有其他事件吗？还是更好的方法来获得包括最新密钥的价值？(我不想等待密钥,或输入)

更新这个工作完美

<input type="text" placeholder="Name Fitler" [(ngModel)]="NameFilter" (ngModelChange)="filterChanged()" />

我正在尝试使用 angular 中的正则表达式来验证电话号码

HTML 内容

<div class="form-group row">
                <input type="text" class="form-control" appPhoneMask placeholder="Mobile Number" autocomplete="off"
                    [ngClass]="{ 'is-invalid': (f.inputCountryCode.errors && mobileNumberform.submitted) }"
                    formControlName="inputCountryCode">
                <div *ngIf="(f.inputCountryCode.invalid ) || (f.inputCountryCode.invalid && (f.inputCountryCode.dirty || f.inputCountryCode.touched))"
                    class="invalid-feedback">
                    <div *ngIf="f.inputCountryCode.errors.required">This field is required.</div>
                    <div *ngIf="f.inputCountryCode.errors.pattern">Invalid phone number.</div>
                </div>
            </div>

TS代码

 this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{12}")]]
    });

验证模式应该允许带空格的数字，因为我使用的是电话号码屏蔽，它在 3 位数字后添加了空格。

该模式不起作用，不断让电话号码验证为假

Angular 4 手机号码验证

允许数字和空格的字段的正则表达式

屏蔽指令

export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false); …

我试图在离子3上使用textMask,但它不起作用我收到错误信息(无法绑定到'textMask',因为它不是'ion-input'的已知属性).我正在关注Joshmorony的教程https://www.joshmorony.com/improve-mobile-form-ux-with-input-masks/

单击此处查看错误消息

app.module.ts

 import { TextMaskModule } from 'angular2-text-mask';
 @NgModule({
  imports: [
    FormsModule,
    TextMaskModule 
 ],

contact.html

        <ion-input type="tel" 
           [(ngModel)]="phoneNumber" 
           [textMask]="{mask: masks.phoneNumber}" >
        </ion-input>

contact.ts

  import { TextMaskModule } from 'angular2-text-mask';

  export class ContactPage {
  form: FormGroup;
  masks: any;

  phoneNumber: any = "";

  constructor() {
    this.masks = {
        phoneNumber: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    };
 }
}