标签: angular5

防止在Angular 5中验证后提交表单

我有以下代码出于演示目的,显示了一个简单的带有错误消息和提交按钮的表格行:

<form [ngFormOptions]="{updateOn: 'submit'}">
   <tid-form-row>
      <label tid-ui-label for="temperatureInput">Temperature:</label>
      <input [tid-ui-input]="{required: true}" id="temperatureInput" name="temperatureName" placeholder="20,4"
             [(ngModel)]="temperatureModel" #temperature="ngModel" [tidDigits]="{integer: 2, fraction: 1}" required>
      <ng-template #hint>
         <small tid-ui-hint>The yellow color indicates that this field is required.</small>
      </ng-template>
      <div tid-ui-error *ngIf="temperature.invalid && (temperature.dirty || temperature.touched); else hint">
         <span *ngIf="temperature?.errors.required">Field is required.</span>
         <span *ngIf="temperature?.errors.tidDigits">Must be max 2 integer digits and max 1 fraction digit.</span>
      </div>
   </tid-form-row>
   <tid-button type="submit">Check validation</tid-button>
</form>
Run Code Online (Sandbox Code Playgroud)

这里tidDigits是一个自定义的ValidatorDirective与此ValidatorFactory:

export function digitsValidator(config: any): ValidatorFn {
  return (control: …
Run Code Online (Sandbox Code Playgroud)

forms typescript angular angular5

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

包更新为angular 5最新版本,但在使用角度模板的visual studio 2017中未更新npm

我在visual studio 2017模板中更新了角4到角5.

我按照链接http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/的说明进行操作

npm install -g npm-check-updates

ncu -u

package.json文件已更新,但是npm没有更新,并且某些npm包没有被修改.

这是屏幕截图 屏幕截图

从图像中,右侧包更新为5.5.1,但npm依赖项仍指向旧版本.

怎么能解决这个问题.

asp.net asp.net-mvc asp.net-core angular angular5

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

Angular http.post嵌套json

我正在使用带有FOSUserBundle的Angular5和Symfony 3.4.

我有类似的东西:

register(username: string, email: string, first: string, second: string)
{
  return this.appHttp.post('register', {username, email, first, second}).subscribe(
    data => {
       this.appHttp.logRequest(data);
    }
  );
}
Run Code Online (Sandbox Code Playgroud)

我需要发送给API的是一个格式化的json,如:

{
  "email": "email@test.com",
  "username" : "userTest",
  "plainPassword" : {
    "first" : "123",
    "second": "123"
   }
}
Run Code Online (Sandbox Code Playgroud)

目前,我的json看起来像:

{
  "email": "email@test.com",
  "username" : "userTest",
  "first": "123",
  "second": "123",
}
Run Code Online (Sandbox Code Playgroud)

我如何发布所需的json?

谢谢!

json symfony angular angular5

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

如何将多个值传递给角度5可观察?

我正在日复一日地学习角度,但我遇到了问题.我在一个组件中有3个值,我需要将它们传递给另一个组件.我对observable和subscription有基本的了解,但我用1参数完成了它.现在我想播放3个值

这是我的购物车代码.

additem(itemText){
  this.cart.push(itemText);
  this.itemscount = this.cart.length;
  this._data.changeCart(this.cart);
}
Run Code Online (Sandbox Code Playgroud)

当我点击产品时,这个函数会调用它并将cart数组发送到observable,并在那里广播购物车数组

export class DataService {

    private cart = new BehaviorSubject<any>([]);
    cast = this.cart.asObservable();

    constructor() { }

    changeCart(item_param) {
        this.cart.next(item_param);
        //console.log(this.cart);
    }

}
Run Code Online (Sandbox Code Playgroud)

现在我需要将3个值传递给observable,我很困惑如何做到这一点因为我已经读过我们只能将一个值传递给observable.我有一个想法将所有值包装在一个数组中并传递该数组,但我搜索了这个但却找不到如何在单个数组中以角度存储多个值.

任何帮助将非常感谢.谢谢

typescript angular angular5

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

Angular 5 with Font Awesome 5

经过一些研究,包括使用Angular,文档等阅读Font Awesome 5,我无法在Angular 5 App和Font-Awesome 5(Pro)之间进行整合.

问题:图标没有出现.

有关我当前场景的更多详细信息:

package.json:

(...)
"dependencies": {
"@angular/animations": "^5.2.4",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/http": "^5.2.4",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"@angular/router": "^5.2.4",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-pro-light": "^5.0.6",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"popper.js": "^1.12.9",
"prismjs": "^1.11.0",
"rxjs": "^5.5.6",
"summernote": "^0.8.9",
"sweetalert2": "^7.11.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular/cli": "^1.7.0-rc.0",
"@angular/compiler-cli": "^5.2.4",
"@angular/language-service": "^5.2.4",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "^2.0.3",
"@types/node": …
Run Code Online (Sandbox Code Playgroud)

angular-cli font-awesome-5 angular angular5 angular-fontawesome

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

AWS EC2 Angular 5 ng不通过浏览器连接

我设法让我的Angular 5应用程序在AWS EC2 Ubuntu上运行...

开始标准的Ubuntu实例,使用PuTTy进入shell,安装节点,进入下4条"魔术线"......

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile
Run Code Online (Sandbox Code Playgroud)

做了我的公司目录,为@ angular/cli做了全局npm安装,克隆了我的git,将dir更改为项目子文件夹,为@ angular/cli做了本地npm安装,然后为我的项目运行了npm install.此时,我能够在上述任何步骤中运行ng服务而没有严重错误!噢!

它显示它很高兴在端口4200上运行.我甚至用netstat -anp检查了 grep 4200以及telnet 127.0.0.1 4200.是的所有工作.

然后我进入AWS仪表板,为我的实例创建了一个安全组,使用默认值打开HTTP和HTTPS,然后为Port Range 4200添加一个自定义TCP规则,打开到Anywhere,并保存.但是,当我进入浏览器并输入http://xx.xx.xx.xx:4200(其中x是AWS分配给我的实例的公共IP)时,我得到一个"无法建立连接到服务器"错误.

我错过了什么?

amazon-ec2 node.js npm-install angular5

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

Angular 5未捕获(承诺):错误:StaticInjectorError(AppModule)

我正在Angular 5 Visual Studio 2017版本15.6.7 TargetFramework中进行此开发-netcoreapp2.0 rxjs:5.5.10

我无法摆脱这个错误:

错误错误:未捕获(承诺):错误:StaticInjectorError(AppModule)[VtoReportComponent-> Vtos]:StaticInjectorError(平台:核心)[VtoReportComponent-> Vtos]:NullInjectorError:没有Vtos提供者!

这是vto.service.ts

import { Component, OnInit } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import { Observable } from 'rxjs';
import { GroupDescriptor, DataSourceRequestState, DataResult, process, State } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { aggregateBy, SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { Vtos } from '../../services/vto.service';

import {
  GridComponent,
  GridDataResult,
  DataStateChangeEvent
} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-vto-report',
  templateUrl: './vto-report.component.html',
  styleUrls: ['./vto-report.component.css']
})
export class …
Run Code Online (Sandbox Code Playgroud)

c# asp.net-mvc promise kendo-grid angular5

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

Angular 6是否正在删除默认元素边距?

我遇到的问题是Angular 6中的html元素(下面示例中的按钮)似乎缺少默认边距:

Angular 5.2.2示例 - 按钮之间具有默认边距/间距

Angular 6.0示例 - 缺少按钮之间的边距/间距

我希望有人可以确认这是一个有角度的问题 - 或者指出问题的根源 - 在我打开一个github问题之前

html css angular angular5 angular6

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

在Angular 5的帮助下呈现页面时出错

我正在Angular 5的帮助下做一个项目。我正在其中调用一个API。

我收到以下错误:

Error: StaticInjectorError(AppModule)[Router -> ApplicationRef]: 
  StaticInjectorError(Platform: core)[Router -> ApplicationRef]: 
    NullInjectorError: No provider for ApplicationRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:951)
    at resolveToken (core.js:1195)
    at tryResolveToken (core.js:1140)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1035)
    at resolveToken (core.js:1195)
    at tryResolveToken (core.js:1140)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1035)
    at resolveNgModuleDep (core.js:8071)
    at _callFactory (core.js:8143)
    at _createProviderInstance$1 (core.js:8091)
Run Code Online (Sandbox Code Playgroud)

我的Package.json是:

{
  "name": "demo-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3", …
Run Code Online (Sandbox Code Playgroud)

javascript angular angular5

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

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