小编Col*_*ett的帖子

Angular 2条件Validators.required?

我应该如何有条件地要求表格字段?我创建了一个自定义验证器,但是我传递给自定义验证器的条件变量是静态的并保持其初始值.我的自定义验证器应该如何获得更新的条件值?也许有一种方法可以用Validators.required而不是自定义验证器来做到这一点?

private foo: boolean = false;
private bar: boolean = true;

constructor(private _fb: FormBuilder) {
    function conditionalRequired(...conditions: boolean[]) {
      return (control: Control): { [s: string]: boolean } => {
        let required: boolean = true;
        for (var i = 0; i < conditions.length; i++) {
          if (conditions[i] === false) {
            required = false;
          }
        }
        if (required && !control.value) {
          return { required: true }
        }
      }
    }
    this.applyForm = _fb.group({
          'firstName': ['', Validators.compose([
            conditionalRequired(this.foo, !this.bar)
          ])],
          ...
    }); …
Run Code Online (Sandbox Code Playgroud)

typescript angular

34
推荐指数
3
解决办法
3万
查看次数

将变量传递给自定义组件

我有自定义组件:

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom-component.html',
    styleUrls: ['./my-custom-component.css']
})
export class MyCustomComponent {
    constructor() {
        console.log('myCustomComponent');
    }
}
Run Code Online (Sandbox Code Playgroud)

我可以像这样使用它:

<my-custom-component></my-custom-component>
Run Code Online (Sandbox Code Playgroud)

但我怎么能传递一个变量呢?例如:

<my-custom-component custom-title="My Title"></my-custom-component>
Run Code Online (Sandbox Code Playgroud)

并在我的组件代码中使用它?

typescript angular2-template angular2-components angular

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

Angular2:找出FormControl是否需要验证器?

如果为控件注册了所需的验证器,是否有人知道找到Angular2 FormControl的方法.

this.form = builder.group({name: ['', Validators.required]};
Run Code Online (Sandbox Code Playgroud)

然后我可以查询this.form.controls['name']控件是否是必填字段?我知道我可以检查它是否有效,但那不是我想要的.

亲切的问候,马克

forms validation typescript angular

32
推荐指数
5
解决办法
2万
查看次数

Angular 2. @Input,因为它不是已知的属性

我有一个包含以下模板的父组件:

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_private]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

然后应用程序尝试显示它告诉我:未处理的承诺拒绝:

模板解析错误:

Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.
1. If 'blocks-banners-slideshow' is an Angular component and it has 'config_private' input, then verify that it is part of …
Run Code Online (Sandbox Code Playgroud)

bind properties input typescript angular

19
推荐指数
2
解决办法
2万
查看次数

获取FormGroup/FormControl中的验证程序

我在我的应用程序中使用了Material 2,但在这个问题中,我想用Input专门解决问题.

正如您在API Reference中看到的那样,有一个名为的属性绑定required,在占位符中显示为星号.

所以,我想知道是否有办法检查表单控件是否在Angular中有一个特定的验证器,因为我真的不想为每个输入手动设置[required]="true/false"

我阅读了AbstractControl文档,但我没有找到任何相关内容.我遇到的hasError 方法(这具有讽刺意味的是没有记录无处 ......无论是在FormGroup也不FormControl也不AbstractControl),但是这不是我要找的.它只是检查表单控件是否有错误,但正如您可能已阅读过,我想检查控件是否有一些特定的验证器...

一些代码:

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="anyCtrl.hasValidator('required')"> <!-- something like this -->
</md-input-container>
Run Code Online (Sandbox Code Playgroud)

我希望这个问题足够清楚.提前致谢.

typescript angular2-forms angular-material2 angular

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

Angular 2 - 一个组件触发刷新页面上的另一个组件

我有一个组件ComponentA,显示元素列表.此列表在此期间被列入ngOnInit.

我有另一个组件ComponentB提供可能影响ComponentA中显示的元素列表的控件.EG可以添加元素.

我需要一种方法来触发ComponentA的重新启动.

有人有想法吗?


细节

A是一个HeaderBar,其菜单显示"savedSearchs"列表

@Component({
  selector: 'header-bar',
  templateUrl: 'app/headerBar/headerBar.html'
})
export class HeaderBarComponent implements OnInit{
  ...
  ngOnInit() {
    // init list of savedSearches
    ...
  }
}
Run Code Online (Sandbox Code Playgroud)

B是一个可以保存搜索的SearchComponent

@Component({
  selector: 'search',
  templateUrl: 'app/search/search.html'
})
export class SearchComponent implements OnInit {
  ...
}
Run Code Online (Sandbox Code Playgroud)

typescript angular2-components angular

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

使用公钥/私钥而不是共享密钥的IdentityServer客户端身份验证

我正在尝试使用公钥/私钥而不是IdentityServer4的客户机密的共享密钥.这种方法记录在这里.

如果它是共享密钥,则请求将包含secret纯文本.例如

curl -X POST \
  http://<identityserver>/connect/token \
  -F client_id=abc \
  -F client_secret=secret \
  -F grant_type=client_credentials \
  -F scope=api1 api2
Run Code Online (Sandbox Code Playgroud)

我的问题是:secret使用公钥/私钥认证方法应该传递什么?

为了给出一些背景知识,使用公共/密钥身份验证的客户端将使用以下步骤向IdentityServer 注册

  1. 客户端生成.crt文件,例如

    // create key
    $ openssl genrsa -des3 -passout pass:x -out client.pass.key 2048
    $ openssl rsa -passin pass:x -in client.pass.key -out client.key
    
    // create certificate request (csr)
    $ openssl req -new -key client.key -out client.csr
    
    // create certificate (crt)
    $ openssl x509 -req -sha256 -days 365 -in client.csr -signkey …
    Run Code Online (Sandbox Code Playgroud)

c# identityserver3 asp.net-core identityserver4

10
推荐指数
1
解决办法
3138
查看次数

将IEntityTypeConfiguration与基本实体一起使用

在EF Core 2.0中,我们能够从IEntityTypeConfiguration更清晰的Fluent API映射(源代码)派生.

如何扩展此模式以使用基础实体?在下面的示例中,我如何才能BaseEntityConfiguration减少重复,LanguageConfigurationMaintainerConfiguration修改BaseEntity仅在BaseEntityConfiguration?中的属性?这样的BaseEntityConfiguration样子会是什么样的; 如果有的话,如何使用OnModelCreating()?请参阅示例末尾附近的TODO代码.

例:

public abstract class BaseEntity
{
    public long Id { get; set; }
    public DateTime CreatedDateUtc { get; set; }
    public DateTime? ModifiedDateUtc { get; set; }
}

public class Language : BaseEntity
{
    public string Iso6392 { get; set; }
    public string LocalName { get; set; }
    public string Name { get; set; }
} …
Run Code Online (Sandbox Code Playgroud)

c# entity-framework-core ef-fluent-api asp.net-core ef-core-2.0

9
推荐指数
2
解决办法
2833
查看次数

将输入字段限制为两位小数 - Angular 5

代码如下

<input type="number" class="form-control" value="" name="cost_price" #name="ngModel" [(ngModel)]="item.cost_price" placeholder="Cost Price"  />
Run Code Online (Sandbox Code Playgroud)

用户不应该输入更多2位小数.

例如,如果用户想要输入21.256.他应该只被允许进入21.25

如何使用角度5来实现这一点?

typescript angular angular-forms

9
推荐指数
2
解决办法
2万
查看次数

Angular 6材质:mat-tab-link由下划线栏选择

我的mat-tab-nav-bar网站有一个导航栏,但mat-tab-link蓝色下划线栏不会追逐活动按钮.它只停留在第一个按钮,不动.虽然在背景颜色改变的意义上,按钮确实变为活动状态,并且它们很好地路由到它们相应的页面.

这是app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  navLinks = [
    { path: '', label: 'The Problem' },
    { path: 'the-solution', label: 'The Solution' },
    { path: 'the-game', label: 'The Game' },
    { path: 'probability-calculator', label: 'Probability calculator' },
  ];
}
Run Code Online (Sandbox Code Playgroud)

这是app.component.html:

<nav mat-tab-nav-bar>
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>

<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

这是app.module.ts …

navigationbar typescript angular-material angular

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