标签: angular-forms

我有一个使用 PrimeNg 列表框（p-listbox）显示的列表。它是一个组列表，我通过实现 ngDoCheck 生命周期钩子来观察选择的变化。ngDoCheck 下的每个更改我都创建了一个条件，该条件将检查选择是否为特定组（“Group0”）。如果用户选择“Group0”，我想将 p-listbox 的选择强制返回到先前选择的组。我能够确定先前选择的组并将其等同于 selectedGroup 但它不起作用。下面是代码：

export class AppComponent implements OnInit, DoCheck{

    selectedGroup: any;
    groups: any [] = [];
    groupList: SelectItem [] = [] ;
    differ: any;

    constructor(private differs:  KeyValueDiffers) {
       this.groups = [
         {"groupId": 1, "groupName": "Group1"},
         {"groupId": 2, "groupName": "Group2"},
         {"groupId": 3, "groupName": "Group3"},
         {"groupId": 4, "groupName": "Group4"},
         {"groupId": 5, "groupName": "Group5"},
         {"groupId": 0, "groupName": "Group0"}
      ];
      this.differ = differs.find([]).create(null);
    }


    ngOnInit() {
      this.groups.forEach(gp=> this.groupList.push({label: gp.groupName, value: gp}));
      this.selectedGroup =  this.groups[0];
    }

    ngDoCheck() { …

我需要实现依赖于多个表单字段的异步验证，所以我将验证放在FormGroup. 但是没有调用验证函数。当然我错过了一些东西。

heroForm: FormGroup;

  ngOnInit(): void {
    this.heroForm = new FormGroup({
      'name': new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i)
      ]),
      'alterEgo': new FormControl(this.hero.alterEgo, {        
        updateOn: 'blur'
      }),
      'power': new FormControl(this.hero.power, Validators.required)
    }, null,this.validate.bind(this));
  }

  validate(
    ctrl: FormGroup
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    console.log(ctrl)
    return this.heroesService.isAlterEgoTaken(ctrl.controls.alterEgo.value).pipe(
      map(isTaken => { 
        console.log(isTaken);
        return (isTaken ? { uniqueAlterEgo: true } : null)
        }),
      catchError(() => null)
    );
  }

在这里创建了一个演示：https : //stackblitz.com/edit/angular-xtqhqi

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

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

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

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

哪个效果更好？

我正在尝试将数组绑定到列表中。绑定部分工作正常。但未显示下拉的默认值。最初数组没有任何值。

代码

<select (change)="select($event)" [(ngModel)]="drp_selectedValue" >
                    <option value ="">Select.....</option>
                    <option *ngFor="let list of dataList?.length > 0 " (click)="select(list)" [ngValue]="list">{{list.name}}</option>

                </select>

目前我的列表显示如下

我还尝试检查 dataList 长度并放置 value="" ，但不起作用。我的代码有什么问题？

当我尝试在角度三上上传图像时，下面的打字稿文件中的 reader.result 出现错误，我该如何解决此问题？我console.log(image)在 onImagePicked 函数中添加了它，但它也没有显示在控制台中，为什么它不显示在控制台中？

打字稿文件

     imagePreview:string;


ngOnInit(){
  this.form = new FormGroup({
    title : new FormControl(null,{validators:[Validators.required]}),
    content: new FormControl(null,{validators:[Validators.required]} ),
    image: new FormControl(null, {validators: [Validators.required]})
  });


        onImagePicked(event: Event){
          const file = (event.target as HTMLInputElement).files[0];
          this.form.patchValue({image: file});
          this.form.get('image').updateValueAndValidity();
          console.log(file);
          const reader = new FileReader();
          reader.onload = () => {
            this.imagePreview = reader.result;
          };
          reader.readAsDataURL(file);
        }

网页文件

<mat-card>
  <mat-spinner *ngIf="isLoading"></mat-spinner>
  <form [formGroup]="form" (submit)="onAddPost()"  *ngIf="!isLoading">
    <mat-form-field>
      <input matInput type="text" formControlName="title" placeholder="title"  >
      <mat-error *ngIf="form.get('title').invalid" >Please enter the Title</mat-error>
    </mat-form-field>

    <mat-form-field>
      <textarea …

我在组件模块中添加了 FormsModule 并尝试将其添加到 app 模块中，但同样的错误在控制台中重复了 4 次。请帮我解决这个问题。

grant-access.component.html

<form #grantAccessForm="ngForm" (ngSubmit)="onSubmit(grantAccessForm)">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <input
                  type="text"
                  class="form-control form-control-alternative"
                  ngModel
                  name="clientName"
                  placeholder="Client Name"
                />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <input
                  type="text"
                  placeholder="IMD Code"
                  class="form-control form-control-alternative"
                  ngModel
                  name="imdCode"
                />
              </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-3 col-md-2">
              <button class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>

grant-access.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-grant-access',
  templateUrl: './grant-access.component.html',
  styleUrls: ['./grant-access.component.scss']
})
export class …

我必须在我的应用程序中实现表单验证。我正在使用 angular 4。我的应用程序中还有 10 个表单。我不知道我的问题是否有效。我真的对这个实现感到困惑。

我的问题：我需要在表单字段中添加验证，包括必填和验证，如电子邮件、电话号码等，如果用户输入表单用户知道某些字段用户可能不知道需要填写其他字段的内容。但是需要保存有效字段，需要在表单中显示错误信息。

我如何在前端实现我使用 Angular 4，后端使用 nodejs

我无法在我的 mat-select 中使用 formControl。

我将从文件中删除所有不必要的数据。

这是我的 package.json

"dependencies": {
  "@angular/cdk": "5.0.4",
  "@angular/common": "~5.2.0",
  "@angular/compiler": "~5.2.0",
  "@angular/core": "~5.2.0",
  "@angular/flex-layout": "2.0.0-beta.12",
  "@angular/forms": "~5.2.0",
  "@angular/material": "5.0.4"
}

文件夹结构：

-src
  -app
    -myComponent
      -myComponent.component.html
      -myComponent.component.ts
      -myCompnent.module.ts
    -shared
      -material
         -material.module.ts
      -shared.module.ts

material.module.ts：

import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material';


@NgModule({
 providers: [],
 imports: [
    FormsModule
 ],
 exports: [
   MatSelectModule
 ]
})
 export class CustomMaterialModule {
}

共享模块.ts

import { CustomMaterialModule } from './material/material.module';

@NgModule({
  exports: [
    CustomMaterialModule
  ],
  declarations: []
}) …