我正在使用反应式表单来获取用户输入.不满意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- >没有错误
我在多个在线正则表达式测试器中检查了这个正则表达式,他们都只接受上面的最后一个例子,他们都没有接受第二个例子.
编辑:
正则表达式很好,运行良好,问题是模式验证器不正确地解析正则表达式或其他东西.
我有一个商店状态,我正在使用可观察的和管道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) 我有一个 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) 我正在尝试使用以下正则表达式验证密码:
^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.{8,}).
请注意,没有终止$字符,因为这会阻止接受有效密码.(我不确定为什么输入字段不会终止字符串).
但是,Angular Validators.pattern添加了字符串char的结尾.因此我的有效密码失败了.
如何防止模式验证器添加$?
我想我可以推出自己的密码验证器,但肯定有更好的解决方案......?
编辑:应该成功的密码:
应该失败的密码:
验证者声明:
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) 我正在@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)