标签: angular-forms

我有以下代码动态添加一个包含标题和两个单选按钮的表单组来创建一个条件，有效地提供其标题以及它是否是可接受的条件：

export enum Acceptability {
  ACCEPTABLE,
  INACCEPTABLE
}

export interface Condition {
  title: string;
  acceptability: Acceptability;
}

export class AddCondition implements OnInit {

  form: FormGroup;
  ACCEPTABILITY = Acceptability;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // build the form
    this.form = this.fb.group({
      conditions: this.fb.array([])
    });

  }

  get conditions(): FormArray {
    return this.form.get('conditions') as FormArray;
  }

  addCondition() {
    this.conditions.push(this.fb.group({
      title: ['', Validators.required],
      acceptability: ['', Validators.required]
    }));
  }
}

<div formArrayName="conditions">
  <div *ngFor="let condition of conditions.controls; let i=index" [formGroupName]="i">
    <input class="form-control" formControlName="title" type="text" …

我有一系列表单(每个表单由1个组件管理).

这些表单中有一种输入模式(例如,其中许多都需要允许输入地址),我必须重构为可重用的组件,因为它们以多种形式使用,我不想复制它们的逻辑也不是他们的模板

每个可重用的组件都必须这样做

1. 有它的逻辑
2. 它的模板包含输入标签而没有<form>标签
3. 有其客户端验证限制
4. 可能从其父级接收初始值
5. 能够将其字段的值作为对象返回到父对象(例如address: {street: "...", "city": "...", ...})
6. 如果不满足其验证约束,则使父表单无效
7. 一旦用户更改了其值,就使其"触摸"

从本教程为Angular2,我在了解如何实现目标1,2和4.

本教程中的解决方案还允许实现其他目标,但它通过从父级执行所有操作来实现(请参阅参考资料app.component.ts#initAddress).

我怎样才能实现3,5,6和7,而孩子中声明控件和它们的约束？

我正在使用模板驱动的表单，并尝试根据某些对象属性设置表单元素的值，但是我面临以下问题 在这样做。这也是我的TD表单代码以及我如何尝试访问它。

.html文件：

<div class="row">
  <div class="col-xs-12">
    <form (ngSubmit)="onAddDevice(f)" #f="ngForm">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Name</label>
          <input type="text" id="name" class="form-control" name="name" ngModel required>
        </div>
        <div class="col-sm-2 form-group">
          <label for="type">Type</label>
          <input type="text" id="type" class="form-control" name="type" ngModel required>
        </div>
        <div class="col-sm-5 form-group">
          <label for="platform">Platform</label>
          <input type="text" id="platform" class="form-control" name="platform" ngModel required>
        </div>
        <div class="col-sm-2 form-group">
          <label for="udid">UDID</label>
          <input type="text" id="udid" class="form-control" name="udid" ngModel required>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <button class="btn btn-success" type="submit" [disabled]="!f.valid">Add</button>
          <button class="btn btn-danger" type="button">Delete</button>
          <button class="btn …

我有从服务器绑定的异步数据的表单:

<form>
 <input [(ngModel)]="currentService.user.username">
 <input [(ngModel)]="currentService.user.email">
</form>

它只有在我添加*ngIf="currentService.user"到表单时才有效,但我希望在从服务器获取数据之前,渲染输入没有值.但我得到错误:

'无法读取未定义'的'属性'用户名'

我怎么解决这个问题？可能,我需要类似于异步管道到ngModel的东西,但显然这不起作用.

我有一个Angular 5正在使用的网站routing。

在我的代码分支中，我有一个文件夹，其中包含带有各种数据的部分。

然后，我要做的是在主页上显示我需要完成的部分，但是问题是，因为我有2个component.html文件嵌套在一个文件中，所以它在单独的行上显示了我的信息部分。

我试过了：

• 将它们包装在DIV主页上
• 浮动：在组件上向左/向右移动 mat-card
• 设定宽度

个人详细信息组件html

  <mat-card>
    <mat-card-title class="firstCard">Personal details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor ID" #id value="101010" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invDoB" placeholder="Date of birth" #dob value="01 January 1950" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invNino" placeholder="National Insurance Number" #nino value="AA112233A" readonly>
        </mat-form-field>
        <mat-form-field> …

以下是我的代码，可从服务获得响应。在这里，我得到了员工名单。

我需要根据服务的响应动态地绑定表单控件，我的服务返回的字段（表单中的员工ID，姓名，部门等）比表单控件更多。如何跳过那些不在窗体控件中使用的控件？

this._employeeService.getEmployeeById(this.employeeId).subscribe((res: Response) => {
        debugger;
        this.employeeForm.get('FileUploader').setValue(null);        
        //this.employeeForm.setValue(res);
        for (const field in res) {
          this.employeeForm.controls[field].setValue(res[field]);
        }
      }); 

this.employeeForm = this._fb.group({
      EmployeeId: 0,
      Name: ''});

我有一个带有各种选择框的表单，这些选择框使用对象作为值：

<mat-option [value]="object">

当我通过表单创建新记录时，这非常有用。现在，当我编辑记录时，我遇到object了mat-select-option不是我从休息服务中获得的“相同”对象，因此编辑记录时没有选择我的选择框。

object.id在决定选择哪个选项时，是否可以告诉选择框窗口小部件匹配？我想可能需要编写一条指令来处理此问题，但是使用Angular或Angular Material库或其他现有解决方案可能已经可以实现。

详细来说，我有我的foo.component.ts文件：

let item = {
    'fruit': { id: 1, 'label': 'Pineapple' },
}

let options = [
    { 'id':1, 'label': 'Pineapple' },
    { 'id':2, 'label': 'Banana' },
    { 'id':3, 'label': 'Papaya' }
]

而我的.html文件：

<mat-select  placeholder="Fruit" [(ngModel)]="item.fruit">
  <mat-option *ngFor="let option of options" [value]="option">{{option.label}}</mat-option>
</mat-select>

用户访问页面时，他们应该看到在中选择的“菠萝” mat-select。由于item.fruit和options数组中的“菠萝” 没有指向同一个“菠萝”对象，因此- mat-select为空。

我想看到类似的东西：

<mat-select          
    placeholder="Fruit" 
    [(ngModel)]="item.fruit" 
    equalityAttr="id"
>

<div class="form-group" [formGroup]="gGroup">
  <label for="grouplabel">Group</label>
  <select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control">
        <option>Select</option>
        <option *ngFor="let group of groups" [selected]="current_group === group.name">{{group.name}}</option>
  </select>
</div>

如何在组件中将<select>字段的值设置为“ 动态选择 ”？

我看了看文档https://angular.io/api/forms/FormControlName#use-with-ngmodel，但仍然没有可以帮助我的示例。

尝试：

this.gGroup.get('groupControl').setValue('Select');