标签: angular-reactive-forms

我尝试使用表单状态对象初始化我的新FormControl,然后我注意到这个控件不会影响我的表单验证,它也会从FormGroup值中消失.

this.userForm = new FormGroup({
  email: new FormControl('', Validators.required),
  firstName: new FormControl('',Validators.required),
  lastName: new FormControl('',Validators.required),
  role: new FormControl({value: 'MyValues', disabled: true},Validators.required),
 })

现在,如果我尝试做:

this.userForm.value //email, firstName, lastName

有人遇到过这个问题吗？有解决方案吗 角度版本:5.2.6

我想在Angular 2+中使用ControlValueAccessor接口创建一个自定义表单元素.这个元素将是一个包装器<select>.是否可以将formControl属性传播到包装元素？在我的情况下,验证状态不会传播到嵌套选择,如您在附加的屏幕截图中看到的那样.

我的组件可用如下:

  const OPTIONS_VALUE_ACCESSOR: any = {
  multi: true,
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => OptionsComponent)
  };

  @Component({
  providers: [OPTIONS_VALUE_ACCESSOR], 
  selector: 'inf-select[name]',
  templateUrl: './options.component.html'
  })
  export class OptionsComponent implements ControlValueAccessor, OnInit {

  @Input() name: string;
  @Input() disabled = false;
  private propagateChange: Function;
  private onTouched: Function;

  private settingsService: SettingsService;
  selectedValue: any;

  constructor(settingsService: SettingsService) {
  this.settingsService = settingsService;
  }

  ngOnInit(): void {
  if (!this.name) {
  throw new Error('Option name is required. eg.: <options [name]="myOption"></options>>');
  }
  }

  writeValue(obj: any): void { …

我有一个formbuilder组,我正在使用valueChanges监听更改并触发一个保存函数,然后在表单上刷新函数:

 this.ticketForm.valueChanges.debounceTime(1000).distinctUntilChanged()
 .subscribe(data => {
   this.saveTicket();
   this.refreshTicket();
 })

然后我重新加载表单并使用patchValue将数据重新分配到表单字段(以及页面上的其他位置,特别是更改日志),例如:

    this.ticketForm.patchValue(ticket, { emitEvent: false });

但是,尽管emitEvent:false,这会导致表单的无限循环保存.

这是一个Angular 4/Ionic 3错误还是我的误解？

我正在使用Angular Material 2 mat-datepicker并希望禁用输入元素,因此用户无法使用文本输入编辑值.

有在角材料详细说明2个文档有关如何禁用的不同部分mat-datepicker,但这些似乎并没有涉及如何禁用文本输入时,它是一种反应形式的一部分.

Angular Material文档建议您通过以下方式禁用文本输入:

<mat-form-field>
              // Add the disabled attribute to the input element ======
              <input disabled                          
                     matInput 
                     [matDatepicker]="dateJoined" 
                     placeholder="Date joined" 
                     formControlName="dateJoined">
              <mat-datepicker-toggle matSuffix [for]="dateJoined"></mat-datepicker-toggle>

              // Add [disabled]=false to the mat-datepicker =======
              <mat-datepicker [disabled]="false" 
                              startView="year"  
                              #dateJoined></mat-datepicker>
            </mat-form-field>

但是,如果您的日期选择器是被动表单的一部分,则文本元素保持活动状态,您将从Angular获得以下消息:

看起来您正在使用带有反应式表单指令的disabled属性.如果在组件类中设置此控件时将disabled设置为true,则实际将在DOM中为您设置disabled属性.我们建议使用此方法来避免"检查后更改"错误.示例:form = new FormGroup({first:new FormControl({value:'Nancy',disabled:true})});

我更新了FormGroup组件中的禁用FormControl,它具有禁用输入所需的效果,但是,如果您随后获取FormGroup使用this.form.value禁用表单控件的值不再存在.

有没有解决这个问题,不涉及使用ngModel仅用于mat-datepicker 的单独的模板驱动形式？

我有一个带有角材料的角反应形式

对于我的所有控件，我添加了所需的验证器。

我不确定如何使用反应形式正确设置芯片控制。

您在哪里设置 formControlName 以便触发所需的验证器？目前我在输入字段上设置了它，我猜这是错误的。

我只希望 courseIds 是带有课程 ID 的逗号分隔字符串。

TS：

form: FormGroup;

ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl("", [Validators.required]),
      courseIds: new FormControl("", Validators.required)
    });
  }

HTML：

  <form [formGroup]="form" (ngSubmit)="submit()">

    <mat-form-field>
      <input matInput type="text" formControlName="name" placeholder="Name">
    </mat-form-field>

    <mat-form-field>
      <mat-chip-list #chipList>
        <mat-chip *ngFor="let cid of courseIds" (removed) = "...">
          {{cid}}
        </mat-chip>

        <input matInput formControlName="courseIds"
               [matChipInputFor]="chipList" 
               placeholder="Ids" 
               (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
   </mat-form-field>    

....

    <button type="submit">OK</button>
  </form>

我正在尝试设置2个字段值<input matInput>abnd <mat-select>编程.对于文本输入,一切都按预期工作,但是对于<mat-select>视图,这个字段就像它有价值一样null.但是,如果我打电话,console.log(productForm.controls['category'].value它会打印出我以编程方式设置的正确值.我错过了什么吗？

这是代码:

表单配置:

productForm = new FormGroup({
        name: new FormControl('', [
            Validators.required
        ]),
        category: new FormControl('', [
            Validators.required
        ]),
    });

设定值:

ngOnInit() {
        this.productForm.controls['name'].setValue(this.product.name);
        this.productForm.controls['category'].setValue(this.product.category);
    }
}

HTML:

<mat-form-field>
    <mat-select [formControlName]="'category'"
                [errorStateMatcher]="errorStateMatcher">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

我有一个FormArray,需要遍历每个成员.

我搜索过,发现很多帖子似乎应该有答案,但我仍然没有找到我需要的东西.

我看到文档中有一个get方法,但我看不到在哪里获得密钥,甚至长度.

如何迭代FormArray？

我有一个角反应形式

<form [formGroup]="form" (ngSubmit)="onSubmit()">

我有两个按钮要提交。当用户按下按钮时，我需要执行一个常见的操作，即提交表单，但我还需要区分按钮，因为我需要根据按下的按钮将用户重定向到不同的页面。这是我的两个按钮：

<button name="Previous" type="submit" [disabled]="form.invalid"> Previous</button>
<button name="Next" type="submit" [disabled]="form.invalid">Next</button>

如何在 OnSubmit 事件中知道按下了哪个按钮？

我正在使用带反应形式的Angular 4.我有一个表单数组,我试图绑定到我在组件中跟踪的数组.我正在使用反应式表单,所以我可以进行验证,所以我不想使用模板表单方法.

我将项添加到表单数组中,如下所示:

createFormWithModel() {
  this.orderForm = this.fb.group({
    orderNumber: [this.order.ProductBookingOrder],
    orderDate: [this.order.PurchaseOrderIssuedDate],
    lineDetailsArray: this.fb.array([])
  })

  const arrayControl = <FormArray>this.orderForm.controls['lineDetailsArray'];
  this.order.ProductBookingDetails.forEach(item => {
    let newGroup = this.fb.group({
      ProductName: [item.ProductName],
      Quantity: [item.ProductQuantity.Quantity],
      UOM: [item.ProductQuantity.UOM],
      RequestedShipDate: [item.RequestedShipDate]
    })
  })
}

orderForm显然是我的反应形式FormGroup.订单是我从API获取的对象,我想更新其值,包括行详细信息.我想我应该在每个newGroup上使用'valueChanges.subscribe',但我不知道如何获得已更改的项的索引.有什么想法吗？

     newGroup.valueChanges.subscribe('i want value and index some how' => {
this.order.ProductbookingDetails[index].ProductName = value.ProductName;
    });

这是此部分的HTML:

<tbody formArrayName="lineDetailsArray">
        <tr [formGroupName]="i" *ngFor="let line of orderForm.controls['lineDetailsArray'].controls; index as i">
          <td><input class="form-control" type="text" placeholder="Product Name" formControlName="ProductName" required/></td>
          <td><input class="form-control" type="number" step=".01" (focus)="$event.target.select()" placeholder="Quantity" formControlName="Quantity"/></td>
          <td><input class="form-control" readonly …

我在使用Angular Material时遇到了一些麻烦,我尝试了很多解决方案,但没有一个能够解决问题.这就是我想要做的:

我正在使用Angular Material with Reactive Forms来制作register表单,一切都很好,直到我添加了一个mat-checkbox组件.这是error我得到的:

错误错误:mat-form-field必须包含MatFormFieldControl.

这是我的代码:

HTML:

<mat-form-field>
   <mat-checkbox formControlName="check">
      Check me!
   </mat-checkbox>
</mat-form-field>

零件 :

this.registerForm = this.formBuilder.group({
    name: ['', Validators.required ],
    email: ['', Validators.required],
    check: ['', Validators.required ]
});

模块:

import { ReactiveFormsModule } from '@angular/forms';
import { RegisterFormComponent } from './register-form.component';
import { MatCheckboxModule } from '@angular/material';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
 imports: [ …