标签: angular4-forms

所以,在myForm中,有2个字段名称和电子邮件,我想添加验证以检查用户是否输入其中一个,它将通过验证; 如果两个字段都为空或空,则失败.

如何组合这样的验证器来满足我的场景？

<form [formGroup]="myForm" novalidate (ngSubmit)="submit(myForm.value)">
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header my-contact-info">
                My Contact Info
            </div>
            <div class="card-block">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Name:</label>
                            <small class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">This field is required.</small>
                            <input type="text" class="form-control" formControlName="name">
                        </div>
                        <div class="form-group">
                            <label>Email:</label>
                            <small class="alert" *ngIf="!myForm.controls['email'].valid && myForm.controls['email'].touched">This field is required. Please input a valid email.</small>
                            <input type="text" class="form-control" formControlName="email">
                        </div>
                    </div>
                    <div class="col-md-6">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    buildForm(): void {
    this.myForm = this._fb.group({ …

我有一个角度路由,在其中一个组件中我有简单的登录表单,并在模板中提供formGroup,它显示上面的错误.

步骤:在app模块中导入ReactiveFormsModule.

在路由组件中:

app.routingmodule.ts

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule …

这是我尝试编译时遇到的错误（ng build --prod）：

Error at /angular/src/app/.../xxx.component.html(xx,xxx): Argument of type 'AbstractControl' is not assignable to parameter of type 'FormControl'.
  Property 'registerOnChange' is missing in type 'AbstractControl'.

有问题的代码（假设）：

        this.myForm = new FormGroup({
            oneField: new FormControl('', [Validators.required,customValidator()])
        });

和 ：

    ngChangeOnefield(event: FormControl){
        // some code...
    }

在我的 html 组件中，我有类似的东西：

<form [formGroup]="myForm" (ngSubmit)="onFormSubmit()">
    <!-- more code -->
    <htmltag (onSelect)="ngChangeOneField(oneField)"/>
    <!-- more code -->
</form>

通过按 Enter 键需要以下面的角度 4 提交表单是我表单中的代码Action = ""不起作用。我还尝试使用(keydown) = domonething(event)和(keydown.enter) = domonething(event) 使用以下代码

keyDownFunction(event) {
    if (event.keyCode == 13) {
        this.submit();
    }
}

下面是我当前的代码

<form #f="ngForm" (ngSubmit)="f.form.valid && openModal(confirmationmodal)" novalidate action="">
    <div class="form-group form-row">
        <label class="col-form-label col-sm-4 col-md-4" for="name">Employee Name</label>
        <div class="col-sm-8 col-md-8">
            <span type="text" readonly class="form-control-plaintext" id="name">{{employeeDetails.EmployeeName}}</span>
        </div>
    </div>
    <div class="form-group form-row">
        <label class="col-form-label col-sm-4 col-md-4 " for="name">Manager Name</label>
        <div class="col-md-8  col-sm-8">
            <span type="text" readonly class="form-control-plaintext"
                id="manager">{{employeeDetails.ManagerName}}</span>
        </div>
    </div>
    <div class="form-group form-row">
        <label for="name" class="col-sm-4 …

我刚接触角度，因此单击时有一个编辑按钮，我需要显示两个按钮，即保存和取消按钮以及隐藏编辑按钮。在单击取消时，我只需要显示编辑按钮。我被困在通过angular和ngIF切换。

这是我的按钮代码形式：

<button id="editBtn" type="button" data-dismiss="modal" (click)="isValid=!isValid" class="btn modal-btn btn-default" [disabled]="isValid">Edit</button>
                                <button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default"[disabled]="!isValid" >Submit</button>
                                <button id="Cancel"  type="button" (click)="isValid=!isValid" data-dismiss="modal" class="btn modal-btn btn-default" [disabled]="!isValid">Cancel</button>

之前我使用[disabled]，但现在我需要显示/ hide。

我正在基于切换值创建表单组验证

public toggle:boolean=false;


ngOnInit(): void {
          this.formGroup = this.formBuilder.group({
          formArray: this.formBuilder.array([
            this.formBuilder.group({
              toggleFormCtrl: [this.toggle, null],
              fnameFormCtrl: ['', this.checkInputs.bind(this)],
              lnameFormCtrl: ['', this.checkInputs.bind(this)],
              addressFormCtrl: ['', this.checkMiInput.bind(this)]
            }),
         ])
       });

  }

checkInputs(c: FormControl) {
if (this.toggle) {
  return c.value === '' ? null : {
    checkinputs: {
      valid: false
    }
  };
} else {
  return c.value ? null : {
    checkinputs: {
      valid: false
    }
  };
}

}



checkMiInput(c: FormControl) {
    if (this.toggle) {
      return c.value ? null : {
        checkMiInput: {
          valid: …

我正在创建一个角度应用程序，用户可以在其中注册。但是在注册时，我要求他提供一些详细信息，例如电子邮件，手机号码等。另外，他可以选择一个用户名。但是在这里，我想在他输入用户名后立即对其进行检查，并显示错误消息，例如“此用户名已存在于我们的数据库中”。

我有mysql数据库，前端为angular4。我是这个角度开发的新手，请帮我怎么做？

这是Google注册的示例图片，

在这里，我在表格上实现了小型搜索过滤器，但我的要求是它应该搜索整个表格而不是页面内？

搜索

<label> Search FRom Table:</label> <input (change)="someval($event.target.value)">          


someval(value){
   let data=JSON.stringify(value);
   console.log(data.length);
   this.auction.find(e=>e.uniqueid=data);
   this.GetDashBoardData();
}
GetDashBoardData(){
    var somedata= this.globalService.getBasicInfoData();
    this.auctionRequest = {    
      "loginId": this.userdata.LoginID
    }; 
    return this.httpService.dashbordTheUser2(this.auctionRequest).subscribe((response) => {
      this.auction = response.data;
}

在这里我稍微改变一下，就像当我在文本框中输入一些文本时，它会在This.auction数组中输入 ，但我不知道如何在表中绑定它

<tr *ngFor="let value of pagedItems">
                     <td>{{value.name}}</td>

我在代码中使用以下代码段。如果我正在应用变量绑定“ [（ngModel）]”，那么我的默认选项即“标题*”不可见。如果我将其删除，则它的行为正常，默认情况下，星标显示第一个选项。

 <select name="title" id="title"title="Please select title" [(ngModel)]="title">
                <option value="title" selected>Title*</option>
                <option value="MD">MD</option>
                <option value="RN">RN</option>
                <option value="Mr">Mr</option>
                <option value="Ms">Ms</option>
  </select>

我必须在我的应用程序中实现表单验证。我正在使用 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: []
}) …