标签: angular2-forms

我有一个使用ReactiveForms构建的Angular 2表单.表单包含2个选择元素.第一个包含车辆制造清单.从列表中选择make时,第二个select元素应显示属于该make的模型.

我一直在玩valueChanges,但我似乎无法获得第二个(子)选择元素来包含所选make的模型.当两个字段都只是简单的输入元素时,对valueChanges做出反应实际上会更新模型输入元素(使用模型FormControl上的setValue).有关简单输入字段,请参阅以下代码示例

是否有可能通过Reactive Forms实现这一目标？

this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
  console.log(value);
  this.vehicleForm.controls['model'].setValue('Some Value');
});

在这种情况下,'value'实际上是所选的make对象.

我正在编写自己的组件并想要进行自定义重置（我需要清理一些标签等）

因此，当有人打电话时，this.form.reset();我想响应此事件并进行一些清理操作。

我不想要求开发人员为我的组件发送自定义重置，例如 this.form.reset({myControl: null})

我只想对表单重置做出反应。你可以帮帮我吗？我怎样才能做到呢？我使用 ReactiveAngular 表单

例子：

<form ...>
  <my-own-component formControlName="fieldName"></my-own-component>
</form>

<div #dataContainer class="infills richtextbox {{field.groupid}}"
                    contentEditable="true" 
                    *ngIf="field.fieldtype=='text'"
                    id="{{field.id}}" 
                    name="{{field.id}}" 
                    [ngStyle]="{'position':'absolute','top':field.y+'px','left':field.x+'px','font-size': field.fontsize,'font-family':field.fontfamily,'width':field.width+'px','height':field.height+'px','border':'1px solid #FFF','background':'#EEE','overflow':'hidden' }"
                    title="{{field.description}}"
                    [(ngModel)]="field.value" 
                    (keypress)="_keyPress($event,field.pattern)"
                    (dblclick)="openFullRTE(field.id)" 
                    (focusout)="field.htmlContent=dataContainer.innerHTML;">
</div>

在这里，我想看看field.description是否具有值“desc”，如果是，则将值分配为空给title属性，否则它可以包含 field.description 中的值。我怎样才能做到这一点？可以使用三元运算符吗？

我尝试了很多解决方案，但没有一个能帮助我解决这个问题......无法弄清楚我的代码中有什么问题......

HTML 代码 ::

<input type="text" class="form-control"  placeholder="Please Enter Your Username" [(ngModel)]="currentUser.UserName" minlength="3" required id="userNameBox" name="UserName" #uName="ngModel">

组件代码 ::

    profile() {
        let uid = Number(sessionStorage.getItem('id'));
        this._homeService.profile(uid).subscribe(
            res => {
            this.currentUser = res

                console.log(this.currentUser);

});

服务 ：：

profile(id: number) {

        return this._http.get(url, id).map(
            (res: Response) => {
                console.log(res.json())
                return new User(res.json()

                ) }
        ).catch(this.handleError);
    }

模型 ：：

export class User {

constructor(json: any) {
    if (json != null) {
        this.Id = json.Id;
        this.UserName = json.UserName;
        this.FirstName = json.FirstName;
        this.LastName = json.LastName; …

我有一个问题 div，它使用 ngFor 生成一些子组件。这些子组件具有用于数据的输入字段。当用户在这些字段中输入数据并单击下一个按钮时，问题 div 会被 ngIf 隐藏并显示预览 div。当再次按下后退按钮时，预览 div 会与 ngIf 一起隐藏并出现问题 div。但是因为问题 div 中的子组件再次创建，所以输入字段中的数据消失了。以下是我的html

<!-- questions

     div-->
    <div class="questions activity_screen" *ngIf="showquestions">
                <div *ngFor="let component of components;let i=index">
                    <app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"></app-termhost>
                </div>
                <a class="submit_button" (click)="getdata()">Submit</a>
            </div>
        <!-- preview div-->
            <div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf">
                <button (click)="goback()">go back</button>
            </div>

如何保持这些组件的先前状态，以便在按下后退按钮后再次出现问题 div 后数据不会丢失！

我觉得这是一个愚蠢的问题，但我就是不明白为什么它不起作用......

我有一个材质 2 对话框，这是对话框组件

import { AfterViewInit, Component, Injectable } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatDialog, MatDialogRef } from '@angular/material';

import 'rxjs/add/operator/toPromise';

// services
import { DialogService } from '../../../services/dialog.service';

@Component({
  selector: 'app-dialog-asset-upload',
  templateUrl: './dialog-asset-upload.component.html',
})

@Injectable()
export class DialogAssetUploadComponent {

  constructor(private dialog: MatDialog, private dialogS: DialogService) { }

  // open dialog
  open(): Promise<any[]> {

    // open dialog
    let dialogRef = this.dialog.open(DialogAssetUploadComponentDialog, {});

    return dialogRef.afterClosed().toPromise().then(res => {

      console.log('in asset upload',res);
      return res;
    });
  }
} …

错误图像：

 <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'">
                    <div class="pb-1">
                            <md2-select placeholder="{{'WidgetType'|translate:lang}}" class="input_custom_width"(change)="widgetNode($event.value)"  required>
                                <md2-option *ngFor="let widgetType of widgetTypeAry" [value]="widgetType.value">
                                    {{widgetType.name}}
                                </md2-option>
                            </md2-select>
                    </div>
                </div>
              <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="fieldsObj['node'] && showRequestAction" >
                <div class="pb-1">
                    <md2-select placeholder="{{'Node'|translate:lang}}" [formControl]="editWidgetForm.controls['nodeId']" [(ngModel)]="nodeId" class="input_custom_width" [(multiple)]="isMultiNode" (change)="nodeChange($event.value)" required>
                        <md2-select-header>
                            <md-input-container class="input_custom_width">
                                <input mdInput type="text" placeholder="{{'Search'| translate:lang}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchNode"/>
                            </md-input-container>
                        </md2-select-header>
                        <md2-option *ngFor="let node of nodesAry | filterPipe : searchNode" [value]="node.value">
                            {{ node.name }}
                        </md2-option>
                    </md2-select>
                    <small *ngIf="editWidgetForm.controls['nodeId'].hasError('required') && editWidgetForm.controls['nodeId'].touched" class="mat-text-warn">{{'nodeReq'|translate:lang}}</small>
                </div>
              </div>

当我在 select 下拉列表中使用 multiple …

我正在尝试将一个组件（例如称为custom-input）封装为基于 Angular 材质组件的 formControl 元素，以包含以下内容：

<mat-form-field >
  <input
    matInput
    [formControl]="inputField"
    formControlName="{{ name }}"
    name="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="inputField.errors">{{
    this.validationService.getErrorMsg(inputField.errors)
  }}</mat-error>
</mat-form-field>

现在这个组件正在使用所需的功能，但不能像普通输入或 matInput一样使用 formControlName 属性绑定到 formGroup（例如下面的例子，它直接绑定到 formGroup 没有问题）

<input
  matInput
  formControlName="inputField123"
  placeholder="{{ 'testInput' | translate }}"
  required
/>

问题是如何让上面的组合组件绑定为formGroup中的formControl元素？我应该实现或公开什么来提供此功能？

我应该使用 ControlValueAccessor 还是有更好的方法用于材质输入组件？

我看到有一个主题看起来像我的，但它并没有真正回答我的问题，因为我们没有以相同的方式管理错误。不推荐使用 FormBuilder 组

首先，我刚刚迁移到 Angular 11，现在遇到了这个问题：

group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.

在此页面中，我会在页面上自动生成许多表单，在日期范围的情况下，我使用两个日期选择器。我创建了一个函数来检查 2 个日期选择器中的值。

成分：

newGroup = this.fb.group(
        {
          [node.type + '_' + node.objectId + '_dateFrom']: [
            '',
            [Validators.required]
          ],
          [node.type + '_' + node.objectId + '_dateTo']: [
            '',
            [Validators.required]
          ]
        },
        {
          validator: CheckFromToDate(
            node.type + '_' + node.objectId + '_dateFrom',
            node.type + '_' + node.objectId + '_dateTo'
          ) …