小编Chu*_* Li的帖子

如何直接从formControl获取Validators？

我有一个电子邮件字段,我添加了两个验证器(必需,电子邮件),我想检查验证状态,input event以便在我的系统成员有效时调用API检查剂量,如果它invalid不调用API并且不要t在页面上显示错误消息.

我将在模糊事件(focusOut电子邮件的输入)上显示错误消息,首先我用于formControl.validator(formControl)触发验证器并检查formControl.valid,我获得了有效状态,但它会在页面上显示错误消息,因为我订阅statsuChange时显示错误消息,当状态等于invalid.

目前,我在一个变量中保存验证器并传递initEmailChaingeEvent()给检查验证状态而没有statusChange事件.它可以工作,但我认为这不是一个好方法,这是我的实现的一个例子:

实例

export class AppComponent {
  public sampleForm: FormGroup;

  @ViewChild('emailElm')
  emailElm: ElementRef;

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    const emailValidtors = [
      Validators.required,
      Validators.email
    ]

    const emailFC = new FormControl(null, {
      validators: emailValidtors,
      updateOn: 'blur'
    });
    //
    this.sampleForm = new FormGroup({
      'email': emailFC
    });
    //
    this.initEmailChaingeEvent({
      emailFC: emailFC,
      validtors: emailValidtors
    });
    //
    this.sampleForm.valueChanges.subscribe((val) => {
      console.log('_blue event:valueChanges', val)
    });
    //
    this.initShowErrorMsgEvent({
      fc: emailFC
    }); …

Run Code Online (Sandbox Code Playgroud)

angular angular-forms angular5 angular6

Chu*_* Li

2018 06-12

9
推荐指数

1
解决办法

1145
查看次数

为什么使用router-outlet访问其他模块的组件不需要添加导出

我不明白router-outlet和module's exports array编译策略之间的区别.

router-outlet将通过ComponentFactoryResolver自动生成组件
如果您不是router-outlet用来访问其他模块的组件,它将从模板解析器中抛出错误

为什么我们需要将它添加到exports数组中,Angular不能自动生成模块中定义的组件router-outlet.

我知道如果我想使用其他模块的组件,则需要添加到导出.

实例

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { M1Module } from './m1/m1.module';
// import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    // AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export …

Run Code Online (Sandbox Code Playgroud)

angular-routing angular-module angular angular-compiler

Chu*_* Li

2018 06-29

5
推荐指数

1
解决办法

554
查看次数

如何更改SVG线动画的起点

我将stroke-dasharray鼠标悬停在其上时会创建线动画，是否可以更改起点？

作为这张照片

/* layout */

body {
  margin: 50px;
}

.container{
  left : 50%;
}


/* main */

.svg-outer:hover {
  stroke-width: 8px;
  stroke: rgba(255, 0, 0, 1);
  animation: MaplogoConatinerStroke .25s linear 1;
}

@keyframes MaplogoConatinerStroke {
  0% {
    stroke-dasharray: 0 549.7;
  }
  100% {
    stroke-dasharray: 549.7 0;
  }
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  Hover the logo
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-outer" viewBox="0 0 166.5 186.49">
    <defs>
      <style>
        .svg-outer {
          width: 25%;
          overflow: initial!important;
        }
        
        .circle {
          fill: rgba(0, 0, 0, 0.6);
        } …

Run Code Online (Sandbox Code Playgroud)

html css svg

Chu*_* Li

2017 10-26

1
推荐指数

1
解决办法

915
查看次数