import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from '../account.interface';
import { AF } from '../angularfire.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.less']
})
export class AccountComponent implements OnInit {
public error: any;
user: FormGroup;
onSubmit() {
console.log(this.user.value, this.user.valid);
}
currentUserDetails = [];
firstName: string = '';
lastName: string = '';
email: string = '';
phone: string = '';
bio: string = '';
userID: string = '';
constructor(private afService: …我有一个带有四个formControls 和只有一个输入字段的 angular 2 反应形式。我想要的是要求用户逐一填写信息。所以，我分配firstControlName到一个属性调用currentFormControlName上ngOnInit，并在模板文件中的输入字段绑定它。当用户填写他的名字时，该字段将有效，提交时我会将currentFormControlName属性更改为下一个 formControlName。但问题是绑定没有更新。输入字段仍然绑定到name。当我在输入字段上输入内容时， 的值name正在更新 not email。
app.component.ts
ngOnInit() {
this.form = this.builder.group({
'name': ['', Validator.required],
'email': ['', Validator.email],
'phone': ['', Validator.required],
'password': ['', Validator.required],
});
this.currentFormControlName = 'name';
}
submit() {
this.currentFormControlName = 'email'; // Setting it manually just for the demo of this question.
}
应用程序组件.html
<form [formGroup]="form">
<input type="text" [formControlName]="currentFormControlName">
<input type="submit" (click)="submit()">
</form>
我不知道该怎么办
这是我的组件打字稿，带有新的FormGroup，然后是新的FormControls
this.trackerForm = new FormGroup({
session: new FormControl('', Validators.required),
date: new FormControl(new Date(), [
Validators.required
]),
contactType: new FormControl('', [
Validators.required
]),
customerType: new FormControl('', Validators.required),
firstName: new FormControl('', [Validators.required, Validators.minLength(80)]),
lastName: new FormControl('', [Validators.required, Validators.minLength(80)]),
phone: new FormControl('', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
extension: new FormControl('', [Validators.maxLength(7)])
});
// this outputs the entire json
console.log(JSON.stringify(this.trackerForm.value));
//How do I ONLY console.log one of the values? date?
页面上的HTML-
<form [formGroup]="trackerForm" (ngSubmit)="onSubmit(trackerForm.value)" novalidate>
<div>
<label class="form-control"><span>{{trackerForm.date.value}} </span></label>
</div>
我正在开发一个新的基于 Angular 的应用程序，其中包含一个基于电子邮件和密码的登录表单。
它有这些字段的表单，由以下几行定义：
let formConfig = {
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required]],
};
this.form = this.formBuilder.group(formConfig)
它按预期工作，除了一种情况：
当用户使用三星（和其他人）的自动完成功能来填充电子邮件字段时，它会在电子邮件后插入一个空格，并Validators.email假定这是一封无效的电子邮件。
我的问题是如何解决这种特殊情况？
我很确定我可以放置一些现有的电子邮件验证正则表达式，但我讨厌重新发明轮子，如果验证器存在，创建另一个看起来很疯狂。
是否可以实现某种验证器来修改我的表单控件值以去除空格？
我正在尝试使用 angular 6 反应形式从标价计算折扣百分比或折扣金额。
form.component.html（简化版）
...
<form [formGroup]="productForm">
<mat-form-field class="quat-width">
<span matPrefix>$ </span>
<input matInput type="number" name="CostPrice" formControlName="CostPrice">
</mat-form-field>
<mat-form-field class="quat-width">
<span matPrefix>$ </span>
<input matInput type="number" name="ListPrice" formControlName="ListPrice">
</mat-form-field>
<mat-form-field class="quat-width">
<span matPrefix>$ </span>
<input matInput type="number" name="DiscountAmount" formControlName="DiscountAmount">
</mat-form-field>
<mat-form-field class="quat-width">
<span matPrefix>% </span>
<input matInput type="number" name="DiscountPercent" formControlName="DiscountPercent">
</mat-form-field>
</form>
form.component.ts（简化）
...
export class ProductFormComponent implements OnInit {
productForm: FormGroup;
constructor(
private fb: FormBuilder,
private productService: ProductsService) { }
ngOnInit() {
this.createForm();
}
createForm() { …我有一个反应式
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>enter items</ng-template>
<div style="display: flex; flex-direction: column;">
<mat-form-field>
<input matInput type="text" placeholder="category" [(ngModel)]="newItem.CategoryName" formControlName="category"
/>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="sub category" [(ngModel)]="newItem.SubCategoryName" formControlName="subCategory"
/>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="product" [(ngModel)]="newItem.ProductName" formControlName="name"/>
</mat-form-field>
<mat-form-field>
<input matInput [(ngModel)]="newItem.Amount" type="number" min="0" placeholder="amount" formControlName="amount"
/>
</mat-form-field>
<mat-form-field>
<input matInput [(ngModel)]="newItem.Price" type="number" min="0" placeholder="price" formControlName="price"
/>
</mat-form-field>
<button mat-raised-button color="primary" (click)="AddNewProduct(newItem)" style="float: left; align-self: flex-end;">submit</button>
</div>
</form>
我这样初始化：
this.secondFormGroup = this._formBuilder.group({
category: ['', Validators.required],
subCategory: ['', Validators.required],
name: ['', …angular angular-reactive-forms angular-forms angular-formbuilder
我想通过实现 ControlValueAccessor 创建自定义表单元素地址。
我正在尝试创建一个 AddressComponent，其中有多个输入字段。我想在像下面这样的反应形式中使用这个组件。
地址.component.html
<form name="form" class="form_main" #addForm="ngForm" (ngSubmit)="addForm.form.valid && saveAddress()" [formGroup]="addressForm">
<!-- Address 1 -->
<mat-form-field class="form-field">
<input matInput placeholder="Address 1" formControlName="address1" required>
<mat-error *ngIf="addressForm.get('address1').hasError('required')">
*Required field
</mat-error>
</mat-form-field>
<!-- Address 2 -->
<mat-form-field class="form-field">
<input matInput placeholder="Address 2" formControlName="address2">
</mat-form-field>
<!-- Address 3 -->
<mat-form-field class="form-field">
<input matInput placeholder="Address 3" formControlName="address3">
</mat-form-field>
<!-- Country -->
<mat-form-field class="form-field">
<input matInput placeholder="Country" formControlName="country" required>
<mat-error *ngIf="addressForm.get('country').hasError('required')">
*Required field
</mat-error>
</mat-form-field>
<!-- State -->
<mat-form-field class="form-field">
<input matInput placeholder="State" …我有一个Angular 6响应式表单，试图用正则表达式模式验证密码，但是它不起作用。
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
/>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Required</div>
<div *ngIf="f.password.errors.pattern">Not valid</div>
</div>
</div>
我正在使用的正则表达式是这样的：
ngOnInit() {
this.registerForm = this.formBuilder.group({
password: ['', [Validators.required, Validators.pattern('^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$')]],
});
}
无论我输入什么密码，都会在用户界面中收到错误消息 Not valid
知道我在做什么错吗？
angular-validation angular angular-reactive-forms angular6 angular-validator
我有一个复杂的嵌套数组，并且我将数据放在一个带有嵌套数组的对象中。我想在编辑视图中显示所有数据。我在 stackblitz 中尝试过，但在加载数据时遇到了问题。链接是在此处输入链接描述
我想在表单文本框中加载二级数组（组）。提前致谢。
我有一个材料日期选择器，它由 mysql 数据库发送的值设置。
该按钮始终处于禁用状态，不应如此，因为日期选择器已包含一个值。但是当我使用日期选择器将值更改为另一个日期时，该按钮已启用。
这里是脚本（我使用日期的静态值来模拟来自服务器的相同值）：
从服务器返回的值2018-2-12 00:00:00显示在日期选择器中，就像2/12/2018我的项目一样，但在 stackblitz 上它显示为2/12/2018 00:00:00.
html脚本：
<form [formGroup]="formGroup">
<mat-card>
<mat-card-content>
<h2 class="example-h2">Datepicker</h2>
<mat-form-field color="warn" appearance="outline">
<input matInput id="date_added" [max]="maxDate" [matDatepicker]="picker" [value]="dateFormat"
formControlName="date_added" placeholder="Date Added">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</mat-card-content>
</mat-card>
<button mat-raised-button color="warn" (click)="updateHouseholdData()" [disabled]="!formGroup.valid">
<mat-icon>update</mat-icon>Update
</button>
</form>
{{formGroup.controls.date_added.errors | json}}
<br>
{{formGroup.controls.date_added.value | json}}
打字稿：
export class AppComponent {
formGroup: FormGroup;
dateFormat;
constructor(private fb: FormBuilder)
{
this.formGroup = this.fb.group({
'date_added': new FormControl('', Validators.required)
})
} …