我在Angular中有一个反应形式,如下所示:
this.AddCustomerForm = this.formBuilder.group({
Firstname: ['', Validators.required],
Lastname: ['', Validators.required],
Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
Picture: [''],
Username: ['', Validators.required],
Password: ['', Validators.required],
Address: ['', Validators.required],
Postcode: ['', Validators.required],
City: ['', Validators.required],
Country: ['', Validators.required]
});
createCustomer(currentCustomer: Customer)
{
if (!this.AddCustomerForm.valid)
{
//some app logic
}
}
Run Code Online (Sandbox Code Playgroud)
this.AddCustomerForm.valid返回false,但一切看起来都不错.
我试图通过检查控件集合中的status属性来查找.但我想知道是否有办法找到无效的并显示给用户?
我已经使用Angular Material创建了一个自动完成字段,并成功从web api获取国家/地区列表.
CountryID - >项目值(或索引)
国家 - >项目文本
当我尝试获取所选项目的值(而不是文本)时,它会按预期返回文本.但我需要获得所选项目的价值.
这是我的代码:
this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France
Run Code Online (Sandbox Code Playgroud)
和
<md-input-container>
<input mdInput placeholder="Select Country..." [mdAutocomplete]="auto" class="form-control validate filter-input" formControlName="country">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
md-select-on-match required md-input-minlength="2">
<md-option *ngFor="let country of countries | async" [value]="country.Country">
{{ country.Country }}
</md-option>
</md-autocomplete>
Run Code Online (Sandbox Code Playgroud)
编辑:我改变了这一行
<md-option *ngFor="let country of countries | async" [value]="country.Country">
Run Code Online (Sandbox Code Playgroud)
对此,
<md-option *ngFor="let country of countries | async" [value]="country.CountryID">
Run Code Online (Sandbox Code Playgroud)
它工作正常,this.WeatherSearchForm.get('country').value;
返回CountryID.
但是在自动填充字段中选择国家/地区后,在UI端,我看到CountryID不是Country.
我已成功构建并将我的角度组件部署到asp.net网站.但问题是,如果我将代码粘贴到body标签下,它可以正常工作.但是,如果我在表单中粘贴它不起作用.
所以这在main.master中工作正常:
<body>
<app-root>testtt</app-root>
<script type="text/javascript" src="/scripts/inline.bundle.js"></script>
<script type="text/javascript" src="/scripts/polyfills.bundle.js"></script>
<script type="text/javascript" src="/styles.bundle.js"></script>
<script type="text/javascript" src="/scripts/vendor.bundle.js"></script>
<script type="text/javascript" src="/scripts/main.bundle.js"></script>
Run Code Online (Sandbox Code Playgroud)
但是,如果我将此代码复制到使用此母版页的另一个网页,它将无法工作,我会在控制台中看到以下日志.
Uncaught Error: Sys.ParameterCountException: Parameter count mismatch.
at Function.Error$create [as create] (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:237)
at Function.Error$parameterCount [as parameterCount] (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:413)
at Function$_validateParameterCount [as _validateParameterCount] (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:118)
at Function$_validateParams [as _validateParams] (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:70)
at String$startsWith (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:491)
at String.startsWith (polyfills.bundle.js:5199)
at new Sys$UI$DomEvent (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:3986)
at browserHandler (ScriptResource.axd?d=3YJmGXxjI2IKNjUZL30bBbVBGOzpviJQaJ0A9mxA_CXR8fTNHpjVjDF4vyz3OkxXRfN4mDos_e1vdt…:4052)
Run Code Online (Sandbox Code Playgroud) ng服务命令后,我在Angular 4项目中出现以下错误.
./src/app/Utils/config.service.ts有多个模块的名称只有外壳不同.在使用其他case-semantic编译文件系统时,这可能会导致意外行为.使用相同的套管.比较这些模块标识符:*D:\ ANGULAR\siteprice.org \node_modules\@ngtools\webpack\src\index.js!D:\ ANGULAR\siteprice.org\src\app\Utils\config.service.ts使用者1个模块,即D:\ ANGULAR\siteprice.org \node_modules\@ngtools\webpack\src\index.js!D:\ ANGULAR\siteprice.org\src\app\utils\email.service.ts*D:\ ANGULAR\siteprice.org \node_modules\@ngtools\webpack\src\index.js!D:\ ANGULAR\siteprice.org\src\app\utils\config.service.ts由2个模块使用,即D:\ ANGULAR\siteprice.org \node_modules\@ngtools\webpack\src\index.js!D:\ ANGULAR\siteprice.org\src\app\app.module.ts
config.service.ts文件:
import { Injectable } from '@angular/core';
@Injectable()
export class ConfigService {
_apiURI : string;
constructor() {
this._apiURI = 'http://www.example.com/xyz/api/';
}
getApiURI() {
return this._apiURI;
}
getApiHost() {
return this._apiURI.replace('api/','');
}
}
Run Code Online (Sandbox Code Playgroud)
email.service.ts:
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import {Observable} from 'rxjs';
import 'rxjs/add/operator/map';
import { ConfigService } from '../Utils/config.service';
import { Email } from '../Models/email'; …
Run Code Online (Sandbox Code Playgroud)