标签: reactive-forms

伙计我需要一些Angular 4反应形式的帮助.我有嵌套的表单组也可以正常工作,除了验证.但是当我尝试在我的html标记中添加一些处理验证时,我的应用程序崩溃了.

我的组件代码如下:

createForm() {
    let options: any = {};

    for (let option of this.annoucementOptions) {
        options[option.title] = new FormControl(false);
    }

    let optionsFormGroup: FormGroup = new FormGroup(options);

    this.annoucementForm = this.fb.group({
        address: this.fb.group({
            country: ['', [Validators.maxLength(50)]],
            state: ['', [Validators.maxLength(50)]],
            city: ['', [Validators.required, Validators.maxLength(50)]],
            street: ['', [Validators.required, Validators.maxLength(50)]],
            apartment: ['', [Validators.required, Validators.maxLength(50)]],
        }),
        description: this.fb.group({
            title: ['', [Validators.required, Validators.maxLength(80)]],
            shortDescription: [''],
            livingPlaces: [''],
            room: [''],
            options: optionsFormGroup
        }),
        priceBlock: this.fb.group({
            price: ['', [Validators.required, Validators.maxLength(80)]],
            type: ['', [Validators.required, Validators.maxLength(80)]],
        }),
    });
}

这是我的模板代码: …

如何在输入中显示转换后的值（例如“1(234)567-890”），而没有转换值（'1234567890'）？

是否可以为maskInputEl和制作单独的值maskInput？

我有模板：

   <input #maskInputEl class="spacer" [type]="type"
   [formControl]="maskInput"/>

和自定义组件：

export class MaskInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
    @ViewChild('maskInputEl') public maskInputEl: ElementRef;

    @Input() public mask: any[];

    public maskInput = new FormControl();

    private _oldValue: string = '';

    public ngOnInit(): void {
        this.maskInput.valueChanges
            .subscribe((value: string) => {
                    let valid = this.isValidValueByMask(value, this.mask);
                    if (valid) {
                        this._oldValue = value;
                    } else {
                        value = this._oldValue;
                    }

                    this._onChangeCallback(value);
                    this.onChange.emit(value);

                    this.maskInputEl.nativeElement.value = value; 
                },
                (err) => console.warn(err)
            );
    }

    public toggleActive(value) { …

我有一个复杂的嵌套数组，并且我将数据放在一个带有嵌套数组的对象中。我想在编辑视图中显示所有数据。我在 stackblitz 中尝试过，但在加载数据时遇到了问题。链接是在此处输入链接描述

我想在表单文本框中加载二级数组（组）。提前致谢。

我正在使用反应式表单，并且我有一个来自对象数组的选择框。我试图设置默认值，但它只是没有设置。

我的表格：

<form [formGroup]="markerForm" (ngSubmit)="onSubmit(markerForm)" novalidate>
      <div class="form-group">
        <label for="markerType">{{ 'MARKER.LABEL_TYPE' | translate }}</label>
        <select  class="form-control" formControlName="markerType"   >
           <option id="markerType" [value]="markerType.id" *ngFor="let markerType of markerTypes">{{markerType.desc}}</option>
        </select>
      </div>
</form>

设置默认值：

const test= [{id:1, desc: 'Restaurants'}, {id:2, desc : 'Fire stations'}];
this.markerTypes= test;
console.log(this.markerTypes[1].desc);
this.markerForm.controls['markerType'].setValue( this.markerTypes[1], {onlySelf: true});

我正在尝试在发送表单后重置我的表单，但只有该值设置为 null。

组件.html

  <div *ngIf="!loading" fxLayout="row" class="note-textarea">
    <form  fxFlex fxLayout="column" fxLayoutGap="10px" [formGroup]="noteForm">
      <mat-form-field fxFlex>
        <textarea matInput #note rows="1" maxlength="100" placeholder="Note" formControlName="description"></textarea>
        <mat-hint align="end">{{note.value?.length || 0}}/100</mat-hint>
        <mat-error *ngIf="noteForm.get('description').errors && noteForm.get('description').touched">description is required</mat-error>
      </mat-form-field>
      <div fxFlex>
        <button mat-stroked-button class="save-btn" (click)="insertNote()">Save</button>
      </div>
    </form>
  </div>

组件.ts

  noteForm: FormGroup = this.formBuilder.group({
    description: new FormControl(null, Validators.required)
  })

 insertNote() {
   // bunch of code 

      this.noteForm.reset();

    }
  }

问题是输入字段被标记为脏，如下所示：

我正在 Angular 中创建动态反应形式。但是在下面的代码中， level.name 不被接受，因为编译器不允许在 group() 内给出变量。它只允许固定值，如 - state、city 等而不是 level.name 变量，其中 level 是一个具有 name 字段的对象......

this.countryNextLevelsBeforeMan.forEach(**level** => {
  let l2 =<FormArray> this.l1FormGroup2.controls["l2"]; 
  l2.push(this.formBuilder.group({
    **level.name** : null   --> compilation error on this line as variable not getting allowed
  }))
});

在 group 方法中，我想将控件名称作为变量 (level.name)。在 for 循环中，如果 level 是 {"name" : "State" , "id" : 2} 然后我想像下面那样设置它，

l2.push(this.formBuilder.group({
        **State** : null    --> No compilation error if we give fixed value
     }))

（而不是 'State' 我希望它由 level.name 动态分配，因为 level.name 可以是 City、Street 等）

请帮忙！！！