标签: angular-reactive-forms

我有一个数组（数据源）列表，我正在其中执行添加和删除操作。我在子组件中传递了一个数组（dataSource），并在子组件中添加了 *ngFor 循环。我已将数组作为 getter setter 传递以检测 @Input 更改。

这是我的AppComponent：

<div>
    <vertital-tabs
          [config]="config"
          [dataSource]="dataSource"    <-- Array changes I want to detect in Child
          [(selectedItem)]="selectedItem">
    </vertital-tabs>

    <div style="background-color: yellow;margin: 10px">
        {{ selectedItem | json }}
     </div>
</div>

在ChildComponent (垂直制表符) 中：

get dataSource(): any {
    return this._dataSource;
}

@Input() set dataSource(value: any) {
    this._dataSource = value;
    // Not called this on Add New button even if Input Datasource is changed.
    // I want this to be called on Add New …

我有一个根据本文制作的自定义输入：medium.com：dont-reinvent-the-wheel。

这是我的代码，它处于严格模式 \xe2\x96\xbc

// input.component.ts\n\nimport { Component, Input, ViewChild } from \'@angular/core\';\nimport {\n    ControlContainer,\n    ControlValueAccessor,\n    FormControl,\n    FormControlDirective,\n    NG_VALUE_ACCESSOR\n} from \'@angular/forms\';\nimport {\n    FloatLabelType,\n    MatFormFieldAppearance\n} from \'@angular/material/form-field\';\n\n@Component({\n    selector: \'app-input\',\n    templateUrl: \'./input.component.html\',\n    styleUrls: [\'./input.component.scss\'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: InputComponent,\n            multi: true\n        }\n    ]\n})\nexport class InputComponent implements ControlValueAccessor {\n    isDisabled!: boolean;\n\n    @Input() isRequired!: boolean;\n\n    @Input() label!: string;\n\n    @Input() placeholder!: string;\n\n    @Input() readonly!: boolean;\n\n    @Input() appearance: MatFormFieldAppearance = \'fill\';\n\n    @Input() floatLabel: FloatLabelType = \'auto\';\n\n    @ViewChild(FormControlDirective, { static: true })\n …

我的 component.ts 代码是

forms = new FormGroup({
    topics: new FormArray([]),
  });

  addTopic(topic: HTMLInputElement) {
    (this.refForm as FormArray).push(new FormControl(topic.value));
    // topic.value = '';
  }

  get refForm() {
    return this.forms.get('topics');
  }

.html 文件有以下代码。

<form [formGroup]="forms">
  <input
    type="text"
    class="form-control"
    (keyup.enter)="addTopic(topic)"
    #topic
  />
  <ul class="list-group">
    <li *ngFor="let topic of forms.get('topics')">
      class="list-group-item">
      {{ topic.value }}
    </li>
  </ul>
</form>

我试图找到并解决问题，但没有提供解决方案或答案。

请查看相关的矮人

https://plnkr.co/edit/f0BxpinhuqVz8o6IIFaL?p=preview

// stack overflow makes you put code if a plunker is linked but it is too much code to copy paste here it would just look messy so I a am putting this comment instead.

如果运行此命令，然后单击“添加”按钮，则会将新条目添加到数组，但是窗体视图不会反映窗体状态，而是复制第一个条目，最后一个条目消失。

如果有人对我做错了什么有什么想法或指南，我将不胜感激，因为我被困在一个看似简单的任务上。

我试图尽可能遵循官方的Angular Reactive Forms指南来构建此示例。

谢谢

我想知道当我在另一个formBuilder组中有一个数组时，如何使用反应形式使用“ setControl”和“ get”。例如：

this.formulario = this.formBuilder.group({
  title: [this.racPessoa.title, [Validators.required]],
  description: [this.racPessoa.description, [Validators.required]],
  person: this.formBuilder.group({
    idPerson:[this.racPessoa.person.idPerson],
    name:[this.racPessoa.person.nome],
    personDocument: this.formBuilder.array([])
  }),
});

在上述情况下，如果我想使用“标题”，则可以编写：

this.formulario.setControl('title', something);
this.formulario.get('title');

但是当我要使用一个人内部的“ personDocument”来处理时，我不知道如何在上面写两个句子

我尝试使用：

this.formulario.setControl('person.personDocument', something);
this.formulario.get('person.personDocument')

但这是行不通的。

我在Angular 6中使用了反应形式。对于输入类型的文本，我希望它是大写的。我尝试了解决方案

(input)="form.patchValue({name: $event.target.value.toUpperCase()})"

该解决方案工作正常，但是当我将光标移到中间并键入一个字符时，唯一的问题是光标移到末尾。

还有其他方法或更好的解决方案吗？

我在角度实现反应形式。我无法将价值从孩子传递给父母。

父表格示例：

<div class="fields-wrap" [formGroup]="parent">
<div class="input-wrap">
  <child-component></child-component>
</div>
<input type"button">Submit</div>
</div>

儿童伴侣表格：

<div class="fields-wrap" [formGroup]="child">
<input type="text" formControlName="firstname" />
<input type="text" formControlName="lastname" />
<input type="text" formControlName="email" />
</div>

当我单击从父组件提交时如何获得这些子值。谁能帮我？

我在Angular 7中使用反应形式。

我有很多字段都依赖于其他字段。

我很好奇我应该使用(change)或this.form.get("control_name").valueChanges？

对于前。两者都将在输入上起作用。我想知道它们之间的优缺点。

哪个效果更好？

我试图使用CVA具有2个嵌套表单。问题是当我将第二个from绑定到formControl时没有用数据初始化。

Stackblitz

我有主表格：

this.requestForm = this.fb.group({
  garageId: 0,
  routes: new FormArray([
    new FormGroup({
      addressPointId: new FormControl,
      municipalityId: new FormControl,
      regionId: new FormControl,
      rvId: new FormControl,
      sequenceNumber: new FormControl,
      settlementId: new FormControl,
      regionName: new FormControl,
      municipalityName: new FormControl,
      settlementName: new FormControl,
      description: new FormControl,
    })
  ]),
  endDateTime: 0,
});

在主要形式的html中，我使用formArrayName将路由绑定到。

 <app-cva-form-array formArrayName="routes"></app-cva-form-array>

组件CVA-FORM-ARRAY具有。

form = new FormArray([
new FormGroup({
  addressPointId: new FormControl,
  municipalityId: new FormControl,
  regionId: new FormControl,
  rvId: new FormControl,
  sequenceNumber: new FormControl,
  settlementId: new FormControl, …

当我的Cookie可用时，我正在通过代码提交表单。但是表格没有提交。请查看代码。相同的代码在Angular 7中也有效。

我所做的一些更改是@ViewChild新语法。请查看代码：

的HTML

<form id="frmRender" [formGroup]="ssrsFromGroup" #frmRender [action]="ssrsReportUrl" method="post" target="embedFrame" (ngSubmit)="submitForm();">
  <INPUT type="hidden" name="rs:Command" value="Render">
  <INPUT type="hidden" name="rs:Embed" value="true">
  <INPUT type="hidden" name="rc:LinkTarget" value="main">
  <INPUT type="hidden" name="rs:Format" value="HTML4.0">

</form>

<iframe [hidden]="!cookiePresent" title="SSRS" class="ssrs-height" id="embedFrame" name="embedFrame" [src]="ssrsReportUrl" fxFlexFill></iframe>

组件代码

    @ViewChild('frmRender', { static: false }) frmRenderEl: ElementRef;
    ssrsFromGroup = new FormGroup({});

内ngOnInit（）或AfterViewInit（）

 ngOnInit() {
    this.params.ssrsReportName = 'PatientsReviewReport';
    this.ssrsUrl = '';

    this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
    this.generateCookie();

  }


private generateCookie() {
    this.service.iFramePathService(this.params).pipe(first()).subscribe((response) => {
      this.ssrsUrl = response.ssrsEmbeddedUrl;
      this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
      console.log('this.frmRenderEl', this.frmRenderEl);
      this.frmRenderEl.nativeElement.submit();
      this.setCookies(response.cookieValue);
      this.cookiePresent …