小编Ava*_*ame的帖子

Angular 4反应形式正则表达式的电子邮件验证失败

我正在使用反应式表单来获取用户输入.不满意EmailValidator我使用的模式.

emailRegEx = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
this.email = new FormControl('', [Validators.required, Validators.pattern(emailRegEx)]);
Run Code Online (Sandbox Code Playgroud)

和HTML:

<input type="email" formControlName="email" [ngClass]="contactForm.get('email').errors && (contactForm.get('email').dirty || isButtonClicked) ? 'contact-input input-error' : 'contact-input'">
Run Code Online (Sandbox Code Playgroud)

但事情就是这样,由于某种原因,正则表达式在@没有句号的情况下接受了4个字符. name@d- >错误
name@doma- >没有错误
name@domain.- >错误
name@domain.com- >没有错误

我在多个在线正则表达式测试器中检查了这个正则表达式,他们都只接受上面的最后一个例子,他们都没有接受第二个例子.

编辑:
正则表达式很好,运行良好,问题是模式验证器不正确地解析正则表达式或其他东西.

html javascript angular

6
推荐指数
1
解决办法
8060
查看次数

带有 as 和 let 的角度异步管道

我有一个商店状态,我正在使用可观察的和管道async。我正在使用as语法来读取返回的对象。
该对象很复杂,并且具有由另一个可观察对象引用async以显示信息的字段。
我可以做如下的事情吗?

<div *ngIf="(fileObs$ | async) as files; let fileList= files[user.UserId]">
<div *ngFor="let file of fileList">
  ...
</div>
<!-- instead of -->
<div *ngFor="let file of files[user.UserId]">
  ...
</div>
Run Code Online (Sandbox Code Playgroud)

asynchronous observable angular

6
推荐指数
1
解决办法
1万
查看次数

Angular 4 将 div 滚动一定量

我有一个 div,它的高度已经给定并且它有overflow-y: auto,所以在必要时它有一个滚动条。
现在我希望能够在事件上滚动该 div 一定数量。到目前为止,我已经能够将scrollIntoView(false)它滚动到底部。我想几乎滚动它,但不是完全滚动到底部。我不想滚动窗口,因为这个 div 是position: fixed相对于窗口的。
据我所知,这在技术上是可行的,但人们一直在提及各种插件。现在插件不是一个选项(也许是未来的某个版本,但不是现在)。

<form novalidate #searchFilterForm [formGroup]="filterForm" role="application">
<section id="searchFilters" role="form">
  <div class="search-filter-tab" #searchFilterTab>
    ..
  </div>
<div #searchFormContainer class="search-filter-container" >
  <div class="search-filter-header">  
    ...
  </div>
  <fieldset class="search-filter-checkboxes search-mobile-small" >
    ...
  </fieldset>
  <fieldset class="search-filter-sliders search-mobile-small" >
    ...
    </div>
  </fieldset>
  <fieldset class="search-filter-dropdowns search-mobile-small" >
    ...
  </fieldset>
  <fieldset >
    <span #scrollToHere></span>
    <div class="search-filter-text-input-container search-mobile-small" *ngFor="let textItem of searchBoxList; trackBy: trackByFunc; let i = index;">

      <app-auto-complete 
              #autoCompleteBoxes
              ...
              (showToggled)="scrollToEndOfFilter($event)"
              >
          <input 
            type="text" …
Run Code Online (Sandbox Code Playgroud)

html javascript angular

4
推荐指数
1
解决办法
1万
查看次数

角度反应形式模式验证器将$添加到正则表达式并打破验证

我正在尝试使用以下正则表达式验证密码:
^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,}).
请注意,没有终止$字符,因为这会阻止接受有效密码.(我不确定为什么输入字段不会终止字符串).
但是,Angular Validators.pattern添加了字符串char的结尾.因此我的有效密码失败了.
如何防止模式验证器添加$
我想我可以推出自己的密码验证器,但肯定有更好的解决方案......?

编辑:应该成功的密码:

  • Test1234
  • tEst1234
  • tesT1234
  • 1234Test
  • 1234tesT
  • T#St1234

应该失败的密码:

  • TEST1234
  • test1234
  • tEst123
  • Test123
  • 测试一下
  • 12345678

验证者声明:

this.password = new FormControl('', [Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,})')]);
this.userForm.addControl('Password', this.password);
Run Code Online (Sandbox Code Playgroud)

regex angular angular-reactive-forms

3
推荐指数
1
解决办法
5603
查看次数

用变量Angular 4进行动画处理

我正在@angular/animations: 4.4.6尝试为将显示大量文本的组件设置展开/折叠动画。默认情况下,它将显示一定数量的文本,但是不同的父组件可以定义不同的折叠高度。
据我所知,我做的一切正确。但是animations装饰器将忽略输入,而直接使用默认值。

import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-long-text',
  templateUrl: './long-text.component.html',
  styleUrls: ['./long-text.component.scss'],
  animations: [
    trigger('expandCollapse',[
      state('collapsed, void', style({
        height: '{{min_height}}',
      }), {params: {min_height: '4.125em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})
export class LongTextComponent implements OnInit {

  @Input() minHeight: string;
  @Input() textBody: string;
  longTextState: string = 'collapsed';
  constructor() {

   }

  ngOnInit() {
  }

  expandText(){
    this.longTextState = this.longTextState === 'expanded' ? …
Run Code Online (Sandbox Code Playgroud)

html css animation angular angular-animations

2
推荐指数
1
解决办法
4781
查看次数