我已经构建了一个名为 的控件TextBox，为了简单起见，我将只在此发布该控件的相关部分。
@Component({
selector: 'app-textbox',
template:
`
<input [(ngModel)]="value" [disabled]="disabled" />
`,
styleUrls: ['./textbox.component.css']
})
export class TextboxComponent implements OnInit, ControlValueAccessor {
constructor() { }
writeValue(obj: any): void {
this._value = obj;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled;
}
disabled = false;
onChange:()=>{}
onTouch:()=>{};
private _value:string;
public get value():string {
return this._value
}
public set value(value:string){
this._value = value;
} …我有<select>异步加载的数据集.我使用hot observable,因为数据可以及时改变.问题是我无法设置选定的值,并且Angular也没有指向第一个元素(在用户执行之前没有设置值).我正在尝试订阅我自己的观察结果......它不起作用,我想知道为什么？我怎么解决这个问题？
PLNKR:https://plnkr.co/edit/uDmTSHq4naYGUjjhEe5Q
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<select [(ngModel)]="selectedValue">
<option *ngFor="let value of (values$ | async)"
[value]="value">{{ value }}
</option>
</select>
`,
})
export class App implements OnInit, OnDestroy {
public name: string;
public selectedValue: string = '';
public values$: Observable<Array<string>> = new Observable(observer => this.observer = observer);
protected observer: Subscriber<Array<string>>;
protected subscription: Subscription;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
ngOnInit() {
this.subscription = this.values$.subscribe((values) => {
console.log('never fired...');
this.selectedValue …我在角度4中创建了一个formGroup,其中用户和组织存储在对象中.现在我想使用这两个对象填充我的表单组.在我的ts中,我做了以下事情:
createForm(user: any) {
this.userForm = this.fb.group({
name: user.profileData.name,
email: user.profileData.email,
phone: user.profileData.mobileNumber,
orgForm: this.fb.group({
name: [ user.organisation.name , [Validators.required]]
})
});
}
在我看来,我正在做这样的事情:
<form [formGroup]="userForm" class="user-form" (ngSubmit)="onSubmit()" novalidate>
<div fxLayout="row">
<div fxLayout="column" fxFlex="50%">
<div class="form-group">
<md-input-container class="full-width">
<input mdInput placeholder="User Name" formControlName="name">
</md-input-container>
</div>
<div class="form-group">
<md-input-container class="full-width">
<input mdInput placeholder="User Email" formControlName="email">
</md-input-container>
</div>
<div class="form-group">
<md-input-container class="full-width">
<input mdInput placeholder="User Phone" formControlName="phone">
</md-input-container>
</div>
<div class="form-group">
<button md-raised-button type="submit" [disabled]="userForm.pristine">Save</button>
</div>
</div>
<div fxLayout="column" fxFlex="50%" formGroupName="orgForm">
<div …我的后端有两个字符串数组,我必须用一个字符串或多个字符串填充.但它们不是关键值对.我试图将一个字符串推入其中一个数组,但遇到的事实是我没有,也无法指定一个控件:值对.
我的formArray看起来像
collections: new FormArray([]),
我的html选择字符串
<md-select placeholder="Collection">
<md-option (click)="addCollectionId('one')" value="Local">Local</md-option>
<md-option (click)="addCollectionId('two')" value="Music">Music</md-option>
<md-option (click)="addCollectionId('three')" value="Performing Arts">Performing Arts</md-option>
<md-option (click)="addCollectionId('four')" value="Sports">Sports</md-option>
<md-option (click)="addCollectionId('five')" value="Restaurants">Restaurants</md-option>
</md-select>
我将字符串添加到formArray的逻辑如下:
addCollectionId(id: string) {
const control = <FormArray>this.createCardForm.controls['collections'];
control.push(id);
}
我收到错误'类型'字符串的参数'不能分配给'AbstractControl'类型的参数.
因为我无法推送一个控件:值对而只有字符串/字符串如何在保持整体形式的同时将字符串推送到数组？
任何帮助/提示/建议将不胜感激.
我正在关注一个关于反应形式的Angular 4教程.在使用FormGroup和FormControl指令时,我发现不一致 -
<form [formGroup]="formObj">
<div class="form-group">
<input formControlName="username">
它在方括号下应用[formGroup]指令而不使用方括号的formControlName指令.
我在这里错过了什么？
看一下这个例子：
https://stackblitz.com/edit/angular-nxjeu3
这是行不通的。
但是，如果我将的providers从@NgModule移到HelloComponent，它确实可以工作。为什么？提供的@NgModule级别或@Component级别不应该相同吗？
我正在尝试创建一个Angular 5嵌套反应形式.
我开始创建一个平面形式,按预期工作,但只要我提取部分表单并将其作为子组件放置,我就会收到错误
错误TypeError:无法在字符串'addressFormGroup'上创建属性'validator'
如果我刚开始键入,则会在控制台中显示另一个错误
错误TypeError:this.form.get不是函数
我究竟做错了什么？我已经阅读了几个线程和教程来尝试解决这个问题,但我认为我错过了一些明显的东西.
import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Address } from '../Property';
@Component({
moduleId: module.id,
selector: 'app-property-form',
templateUrl: './property-form.component.html',
styleUrls: ['./property-form.component.css']
})
export class PropertyFormComponent implements OnInit {
propertyForm: FormGroup;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.createForm();
}
createForm() {
this.propertyForm = this._formBuilder.group({
saleOrLet: ['Sales', Validators.required],
addressFormGroup: this.initAddress()
})
}
initAddress() {
return this._formBuilder.group({
houseNameNumber: '',
address2: '',
postCode1: '',
postCode2: ''
}) …如何在Angle 4+中获取FormControl的完整路径？
我有反应形式：
{
name: '',
address: {
city: '',
country: ''
}
}
而且我需要获得完整的控制权：
const addressFormGroup = this.form.get('address');
const cityControl = addressFormGroup.get('city');
cityControl.plsGiveMeFullPath() //address.city
有没有现有的方法来获取cityControl的完整路径：FormGroup？
我有一个用于创建新实体的表单,如下所示:
<form #createAppForm="ngForm"
(ngSubmit)="createApplication(createAppForm.value)"
autocomplete="false" novalidate>
<div class="form-group"
[ngClass]="{'error': createAppForm.controls.applicationName?.invalid && createAppForm.controls.applicationName?.touched}">
<label for="applicationName">Application Name</label>
<em *ngIf="createAppForm.controls.applicationName?.invalid && createAppForm.controls.applicationName?.touched">Required</em>
<input name="applicationName" required id="applicationName" type="text"
class="form-control" placeholder="Name of application..." />
</div>
我没有在输入中使用ngModel,因为表单出现时应该是空白的,并且我将createAppForm.value提交给ngSubmit.但是,每当我检查表单的有效属性时:
{{createAppForm.invalid}}
总是返回false,即使我单击输入字段并单击,也没有填写任何内容.作为必填字段,它是否应该返回true？
我使用了类似的形式,编辑数据,在那里我使用[ngModel]并且工作正常,验证了必需的字段.这里是否需要[ngModel],如果是这样,为什么呢？因为我正在传递表格的价值.
在Angular中，如何添加按钮而不提交表单？
例如，我想在onCancel不提交表单的情况下打电话，但是更新按钮应提交表单，并且仍然保留ngSubmit。
<form [formGroup]="form" (ngSubmit)="submit()">
<p>
<select ...>...</select>
</p>
<p>
<button
type="submit"
mat-raised-button
color="primary">
update
</button>
<button mat-raised-button (click)="onCancel($event)">
cancel
</button>
</p>
</form>