我正在开发 Angular 5 应用程序。我有反应形式，一切正常。现在我需要在用户单击复选框 true 时禁用输入。一切正常，希望知道如何禁用组件的输入。我成功获取了输入的 id，但不知道下一步做什么？？？
private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
console.log(">>>>>>> questionAnswerProvidedStateEvent ",questionAnswerProvidedState);
var elementReference = document.getElementById(questionAnswerProvidedState.QuestionId);
console.log("elementReference ",elementReference);
}
<div *ngSwitchCase="'textbox'"> <small>textbox</small>
<div class="form-group">
<input *ngSwitchCase="'textbox'"
[formControlName]="question.key"
[id]="question.key"
[type]="question.type"
[(ngModel)]="question.value"
(keyup.enter)="onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(blur)="onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(focus)="previousValue=question.value"
>
</div>
</div>
以下文本是循环，因此会有很多输入，每个输入都有唯一的 id
https://angular.io/api/forms/FormControl 我检查了 angular 网站上的 FormControl 页面，看看它是否有一个允许我设置初始值、禁用模式和验证器的构造函数，但它似乎没有这样的构造函数。所以我的问题是，是否可以初始化一个具有值、被禁用并设置了 Validators.required 的 formcontrolname ？
这是我到目前为止尝试过的：
this.temperatureSettingForm = fb.group({
'country' : [{value: '', disabled: true},Validators.required],
'cities' : {value: '', disabled: true},
'checkBox' : {value: false, disabled: true},
'months': fb.group({
'january' : {value: '', disabled: true},
'february' : {value: '', disabled: true},
'march' : {value: '', disabled: true},
'april' : {value: '', disabled: true},
'may' : {value: '', disabled: true},
'june' : {value: '', disabled: true},
'july' : {value: '', disabled: true},
'august' : {value: '', …我试图通过说它是否可用异步验证器来验证用户名，我已经尝试了很多解决方案，但我不知道如何完成这项工作，我有这个错误：
Error: Expected validator to return Promise or Observable.
我的方法 validateUsername() 不完整，我怎样才能让它工作？
注册.component.ts
this.registerForm = this.fb.group({
username: ['', [Validators.required], this.validateUsername.bind(this)],
email: ['', [Validators.required,
Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],
password: this.fb.group({
pwd: ['', [Validators.required, Validators.minLength(1)]], // todo
confirmpwd: ['', [Validators.required, Validators.minLength(1)]]// todo
}, {
validator: this.mustMatch('pwd', 'confirmpwd'),
}),
birthday: ['', Validators.required]
});
}
validateUsername(control: AbstractControl) {
this.userservice.checkUserExist(control.value).subscribe(
res => {
this.exist = 'username available ';
},
error => {
this.exist = 'username unavailable ';
}
);
}
注册.component.html
<div class="form-group">
<label for="inputName" class="font-weight-bold">Usuario</label>
<div class="input-group …我已经使用模板表单构建了一个包含大量输入的大表单。现在，我有了一个动态添加一部分输入的要求。由于使用Reactive Form动态添加输入似乎更容易，因此我想将输入的特定部分更改为Reactive Form。
那么有可能在同一个表单标签中混合反应形式和模板形式吗？
我有一个带有 FormAwway 的表单，其中显示了所购买的产品，这是我的组件：
constructor() {
this.purchaseForm = new FormGroup({
id: new FormControl(null, Validators.required),
purchase: new FormControl(null, Validators.required),
date: new FormControl(null, Validators.required),
products: new FormArray([]),
});
}
public createNewLine(object: any = {}): FormGroup {
const newLine = new FormGroup({
index: new FormControl(null),
id: new FormControl(object.id, Validators.required),
id_product: new FormControl(object.id_produto, Validators.required),
quantity: new FormControl(object.quantidade, Validators.required),
value_unit: new FormControl(object.valor_unitario, Validators.required),
value_total: new FormControl(object.valor_total, Validators.required),
});
const formArray = <FormArray>this.purchaseForm.get('products');
newLine.get('index').patchValue(formArray.length);
newLine.valueChanges.pipe(debounceTime(400)).subscribe(value => this.updateProductValue(value));
return newLine;
}
private updateProductValue(object): void {
const quantity = …我想获取每一行中输入的值并获取这些行的总和。
我的 HTML：
<ng-container formArrayName="cap_values">
<tbody *ngFor="let item of capValues.controls; let i=index" [formGroupName]="i">
<tr>
<td class="freeze-first-col"><input type="text" (blur)="getName(item.value.name)" formControlName="name"></td>
<td><input type="number" formControlName="fdnTotalShares"</td>
</tr>
</tbody>
</ng-container>
我的.ts：
ngOnInit() {
this.form = this.fb.group({
cap_values: this.fb.array([this.fb.group({
name: '',
fdnTotalShares: '',
}
)])
})
}
如何遍历数组中的每个值并求和？我见过.valueChanges但不完全确定如何使用它。
我知道我们可以valueChanges在 FormArray 上使用并在键入时查看更改。我的问题很简单：如何执行array.at(i).patchValuein valueChanges？我需要知道我键入值的行的索引并更新FormControls。我想要实现的是例如在计算器中，我想在添加两个数字时动态显示该值，而无需在输入字段外单击。
ngOnInit() {
this.form = this.fb.group({
fdnUnitPrice: [''],
cap_values: this.fb.array([this.fb.group({
name: '',
fdnTotalShare: '',
fdnVal: '',
}
)])
})
this.onValChanges();
}
onValChanges(): void {
this.capValues.valueChanges.subscribe(val => {
console.log(val.length)
})
}
在我上面的代码中，结果应该是什么fdnVal，当我fdnUnitPrice与相乘时它应该显示值fdnTotalShare。下一行可能会有不同的值fdnTotalShare，所以fdnVal应该不同。
我有一些反应形式的字段，我必须检查值是否已更改。我知道如何检查一个字段上的值是否发生了变化
this.form.controls['phone'].valueChanges.subscribe(
data => console.log('form changes', data)
);
我的问题是我需要检查两个或多个字段，例如电话和地址。
我有这样的 mat-input 错误处理
<mat-form-field>
<input formControlName="title" matInput placeholder="Title*" />
<mat-error *ngIf="addNewForm.get('title').errors?.required">
Can not be empty
</mat-error>
<mat-error *ngIf="addNewForm.get('title').errors?.minlength">
Min length is 1 character
</mat-error>
<mat-error *ngIf="addNewForm.get('title').errors?.maxlength">
Max length is 255 characters
</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="name" matInput placeholder="Name*" />
<mat-error *ngIf="addNewForm.get('name').errors?.required">
Can not be empty
</mat-error>
<mat-error *ngIf="addNewForm.get('name').errors?.minlength">
Min length is 1 character
</mat-error>
<mat-error *ngIf="addNewForm.get('name').errors?.maxlength">
Max length is 255 characters
</mat-error>
</mat-form-field>
如何直接在组件中处理这个问题，而不是手动编写所有这些错误，检查组件中的所有内容并动态设置错误，如下所示
<mat-form-field>
<input formControlName="title" matInput placeholder="Title*" />
<mat-error>{{ someError }}</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="name" matInput placeholder="Name*" /> …我正在 Angular 中创建动态反应形式。但是在下面的代码中， level.name 不被接受，因为编译器不允许在 group() 内给出变量。它只允许固定值，如 - state、city 等而不是 level.name 变量，其中 level 是一个具有 name 字段的对象......
this.countryNextLevelsBeforeMan.forEach(**level** => {
let l2 =<FormArray> this.l1FormGroup2.controls["l2"];
l2.push(this.formBuilder.group({
**level.name** : null --> compilation error on this line as variable not getting allowed
}))
});
在 group 方法中，我想将控件名称作为变量 (level.name)。在 for 循环中，如果 level 是 {"name" : "State" , "id" : 2} 然后我想像下面那样设置它，
l2.push(this.formBuilder.group({
**State** : null --> No compilation error if we give fixed value
}))
（而不是 'State' 我希望它由 level.name 动态分配，因为 level.name 可以是 City、Street 等）
请帮忙！！！