标签: reactive-forms

我的组件中有一个反应形式,我想touched在每个输入上设置属性等于true.我目前的代码是这样但它却引发了我的错误Cannot set property touched of #<AbstractControl> which has only a getter:

addressForm: FormGroup;

...

this.addressForm = this._fb.group({
    street: ["", [<any>Validators.required]],
    city: ["", [<any>Validators.required]],
    state: ["", [<any>Validators.required]],
    zipCode: ["", [<any>Validators.required]],
    country: ["", [<any>Validators.required]]
});

...

for (var key in this.addressForm.controls) {
    this.addressForm.controls[key].touched = true;
}

如何设置touched每个输入的值true？

我希望重构我的 Angular 项目中的大量组件，以拥有强类型的 FormGroups、FormArrays 和 FormControls。

我只是在寻找一种实现强类型反应形式的好方法。任何人都可以根据自己的经验提供建议/建议吗？

谢谢你。

编辑：

澄清一下，强类型是指当前当我创建 FormGroup 或 FormArray 时，我无法指定其中的实际表单的结构。当我将此表单传递给我的应用程序中的各种组件时，我觉得我变得更难维护了。

使用Angular(4.x)我使用ReactiveForms并且我在FormControl("input")上订阅了valueChanges,如下所示:

export class App {
  version:string;
  formControl = new FormControl('default', []);
  form = this.fb.group({
        input: this.formControl,
        input2: ('',[])
    });

  constructor(private fb: FormBuilder) {
    this.version = `Angular v${VERSION.full}`
  }

  ngOnInit() {
    this.formControl.valueChanges.subscribe(value => doSomething(value));
  }

所以现在我可以对FormControl的值进行更改,但我当然从某处开始填写表单的值,所以我习惯form.patchValue(data)这样做.

由于这不是用户更改,我不想对它做出反应,因此添加标志emitEvent: false,如:this.form.patchValue(data, {emitEvent: false}).

哪个按预期工作.

现在我有一些逻辑,当表单加载时,我将整个表单设置为禁用this.form.disable({ emitEvent: false }),并在完成加载后将整个表单设置为再次启用:this.form.disable({ emitEvent: false })

但我也有逻辑,根据不同的标志将FormControl设置为启用/禁用: this.formControl.enable( {emitEvent: false});

我现在看到的问题是,当Form改变状态时,它会触发FormControl.valueChanges,即使我提供了emitEvent: false标志.

这是预期的行为还是错误？我预计在提供旗帜时根本不会触发任何事件？

我已经做了一个可以在这里测试的插件:https://plnkr.co/edit/RgyDItYtEfzlLVB6P5f3？p = preview

我收到此错误：

尚未向该数组注册任何表单控件。如果您使用的是ngModel，则可能需要检查下一个刻度（例如，使用setTimeout）。

使用此代码时：

public settingsForm: FormGroup = this.fb.group({
  collaborators: this.fb.array([]),
  rsvp: this.fb.group({
    latestDate: ['', [Validators.required]],
    latestTime: ['', [Validators.required]],
    guestLimit: ['', [Validators.required]],
    isRSVPOpen: false,
    isGuestPlusOne: false,
    isAutoApproveToGuestlist: false,
    isOnlyFacebookRSVP: false,
    isBirthdayAndPhoneRequired: false
  }),
  tickets: this.fb.group({
    info: this.fb.group({
      closingDate: '',
      closingTime: ''
    }),
    types: this.fb.array([])
  })
});

内部ngOnInit：

this.eventSubscription = this.af.database.object('/events/' + this.eventId)
  .filter(event => event['$value'] !== null)
  .subscribe((event: IEvent) => {

    const settings: ISettings = event.settings;
    const collaborators: ICollaborator[] = settings.collaborators;
    const rsvp: IRSVP = settings.rsvp;
    const tickets: ITickets …

需要知道，当您在一个表单中有多个控件并且您想知道用户更改为哪个控件以便您可以执行某些操作时。

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

为什么我需要获取 formControlName？

正如您在图像中看到的，某些字段已编辑但未确认，这就是为什么用户会看到用于验证或取消对该特定字段的操作的选项的原因。这就是为什么我需要获取formControlName输入更改的字段，以便我可以只显示该字段的选项。

我已经搜索了它的解决方案，但找不到stack-overflow这就是为什么我决定发布这个问题的答案

我使用反应形式和有角度的材料mat-select创建了一个表单，我用它来创建一个名为“核心”的对象。核心对象有两个属性：“name”和“owners”。“owners”属性是一个IUser对象数组。

核心对象：

export interface ICore {
  id?: number;
  name: string;
  owners: IUser[];
}

表格：

<form [formGroup]="parentForm">
      <mat-form-field class="example-full-width">
        <input matInput formControlName="name" placeholder="Name">
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <mat-label>Users</mat-label>
        <mat-select formControlName="owners" multiple>
          <mat-option *ngFor="let user of users" [value]="user"> {{ user.username }}</mat-option>
        </mat-select>
      </mat-form-field>
    </form>

“ users ”变量是可以选择的所有可用用户的数组。

 users: IUser[];

该表单效果很好，但现在我想使用相同的表单来编辑核心对象，为此我需要在加载页面时在“所有者”表单控件中显示核心所有者。

表单创建：

  createForm() {
    this.coreForm = this.formBuilder.group({
      name: ['', [Validators.required]],
      owners: ['', [Validators.required]]
    });
  }

我如何获得核心：

getCore() {
    this.coreService.getCore(this.route.snapshot.params['id'])
      .subscribe(
        res => {
          this.core = res;
          this.updateForm();
        }, …

我的目标是将所有验证消息放在组件而不是html文件中

我有一个注册页面,下面是字段:

public buildRegisterForm() {
this.userForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.pattern(this.emailPattern)]],
    retypeEmail: ['', Validators.required],
  }, { validator: formMatcherValidator('email', 'retypeEmail') }),
  passwordGroup: this.fb.group({
    password: ['', [Validators.required, strongPasswordValidator()]],
    retypePassword: ['', Validators.required],
  }, { validator: formMatcherValidator('password', 'retypePassword')}),
});
}

我正在按照本教程链接实现我想要的,即将所有验证消息放在组件文件而不是html文件中.

export const validationMessages = {
'firstName': {
'required': 'Your first name is required.',
'minlength': 'Your first name must be at least 3 characters long.'
},
'lastName': {
'required': 'Your last …

我希望创建一个有两个目的的组件，因为背后的代码是相同的。

所以我决定使用ng-template。

第一部分是模态弹出窗口，html 如下所示：

<div class="modal fade" #modal="mdbModal" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
    aria-hidden="true" mdbModal ng-if="!static && saveForm">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="card" [formGroup]="saveForm" (ngSubmit)="onSubmit()">
                <div class="modal-header">
                    <h4 class="modal-title pull-left">Are you sure?</h4>
                    <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div *ngTemplateOutlet="form"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" (click)="modal.hide()">Cancel</button>
                    <button type="submit" class="btn btn-primary" (click)="modal.hide()">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

第二部分是静态形式，看起来像这样：

<form class="card" [formGroup]="saveForm" (ngSubmit)="onSubmit()" [ngClass]="{ 'mb-0': modal }"
    *ngIf="static && saveForm">
    <div class="card-header">
        <h3 …

我正在尝试为用户创建一个表单,允许用户将电话号码与用户关联.目前实施的反应形式是否可行？例如,我希望下面的表单可以接受许多电话号码.我的前端实现将显示电话号码字段,并且将具有允许添加额外电话号码字段的按钮.

userForm = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  phoneNumber: new FormControl('', Validators.required)
});

我的黑客解决方案是

userForm = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('', Validators.required),
  phoneNumber: new FormControl('', Validators.required),
  phoneNumber1: new FormControl(),
  phoneNumber2: new FormControl(),
  phoneNumber3: new FormControl(),
  phoneNumber4: new FormControl()
});

我可以抑制其他电话字段,直到单击添加其他电话号码按钮.

有没有人成功地使用mat-selection-list过 Angular 的反应式形式。当我尝试使用它时，我得到了

values.map 不是函数

下面是我的 html 代码：

<div class="form-group" [formGroup]="activityForm">
      <mat-selection-list formControlName="activity" (selectionChange)="onActivitySelected($event)">
        <mat-list-option *ngFor="let act of activities"
                         [value]="act.id">
          {{act.name}}
        </mat-list-option>
      </mat-selection-list>
</div>

这是我的表单定义：

this.formGroup1 = this.fb.group({
      destinationForm: this.fb.group({
        destination: [null, Validators.required]
      }),
      activityForm: this.fb.group({
        activity: [[''], Validators.required]
      }),
      travellerForm: this.fb.group({
        firstName: ['', Validators.required],
        lastName: '',
      })
});

有人可以帮忙解决这个问题吗

堆栈跟踪：