标签: angular4-forms

如何在primeng自动完成框中显示多个字段.

例如:

<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name,lastname"></p-autoComplete>

or 
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name+' '+lastname"></p-autoComplete>

但是这不起作用.当我在一个字段属性中传递2个值时,如上所示,它不会在用户界面中显示任何值,对于单个值,它可以完美地工作

(例如:-field = "名称")

.

我有一个服务,它返回一个代表用户资金的值,我希望用户能够进行等于或小于总金额的交易.我试过像这样使用max validation:

valid() {
        const form: FormGroup = this._fb.group({
          fond: ['', [Validators.required]],
          serie: ['', [Validators.required]],
          account: ['', [Validators.required, Validators.min(1)]],
          value: ['', [Validators.required, Validators.min(1)]],
          subAccount: ['', [Validators.required, Validators.min(1)]]
        });
        return form;
      }

但是它不起作用,似乎max()必须从头开始设置值,所以它只是假定totalAmount为undefined.

我想在不使用change()或click()函数的情况下获取组件中表单的所有已检查项目,因为它无法获取已经检查过的项目.

这是我在TS中的数组:

  PartyRoles = [
    {
     Id: 1,
     Name: "Vendor",
     Checked: true
    },
    {
      Id: 2,
      Name: "Client",
      Checked: true
    },
    {
      Id: 3,
      Name: "Consigner",
      Checked: false
    }       
  ]

我的HTML表单:

<form (ngSubmit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
       </label>
    </div>
</form>

我的onSubmit函数,我想要获取所有选中的值:

  editPartyRolesSubmit= function () {
    // Please suggest how to fetch checked items
  }

所以,我在mat-form-field中使用mat-select时遇到了问题.使用mat-form-field和mat-input不是问题,我相当确定我的导入也是正确的,但是在尝试使用mat-select时我收到以下错误:

错误:md-form-field必须包含MdFormFieldControl.您是否忘记将mdInput添加到本机...

我的HTML代码如下:

<mat-form-field class="full-width">
  <mat-select name="sampleType" formControlName="sampleTypeCtrl" 
   placeholder="Sample Type" required>
     <mat-option *ngFor="let sample of samples" [value]="sample.value">
       {{ sample.viewValue }}
     </mat-option>
  </mat-select>
</mat-form-field>

我的视图模块包含此组件并导入到我的主app.module.ts文件中,如下所示:

...
import { MatFormFieldModule, MatInputModule, MatSelectModule } from 
   '@angular/material';
...

@NgModule({
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    ...
  ],
})
export class ViewModule {}

我的主app.module.ts文件包含ViewModule和NoConflictStyleCompatibilityMode导入,如下所示:

...
import { ViewModule } from './view/view.module';
import { NoConflictStyleCompatibilityMode } from '@angular/material';
...
@NgModule({
  ...
  imports: [
    ViewModule,
    NoConflictStyleCompatibilityMode
  ],
  ...
})
export class AppModule { }

当我从mat-select周围移除mat-form-field时,错误消失了,但是我对mat-input(使用mat-form-field)和mat-select的样式不一致.我正在导入MatSelectModule和MatFormFieldModule,但我收到此错误.我还更新了我的npm角度材料2,以便它具有最新和最好的,但仍然没有.我在俯瞰什么？我已经看到在最近的stackoverflows中解决了这种类型的问题,但我已经尝试过的每个解决方案都没有运气.

mat-select不正常工作
mat-form-field必须包含MatFormFieldControl

我开发一个角度4应用程序,并在将数据绑定到表单时遇到问题.绑定代码似乎很好,不知道问题是什么.当我调试应用程序时,我可以看到结果正确填充了下面的代码行this.editMovieForm = result; 在setFormValues()方法中.当我检查控制台窗口时,我看到以下错误

EditmovieComponent.html:1 ERROR TypeError: _this.form.get is not a function
    at forms.es5.js:4907
    at Array.forEach (<anonymous>)
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective._updateDomValue (forms.es5.js:4906)
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.ngOnChanges (forms.es5.js:4774)
    at checkAndUpdateDirectiveInline (core.es5.js:10840)
    at checkAndUpdateNodeInline (core.es5.js:12341)
    at checkAndUpdateNode (core.es5.js:12284)
    at debugCheckAndUpdateNode (core.es5.js:13141)
    at debugCheckDirectivesFn (core.es5.js:13082)
    at Object.eval [as updateDirectives] (EditmovieComponent.html:1)


ERROR Error: Uncaught (in promise): TypeError: _this.editMovieForm.patchValue is not a function
TypeError: _this.editMovieForm.patchValue is not a function
    at main.bundle.js:446
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:2908)
    at Object.onInvoke (vendor.bundle.js:146628)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:2907)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (polyfills.bundle.js:2658)
    at polyfills.bundle.js:3389
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2941)
    at …

所以我有一个像这样的子组件

export class ChildComponent implements OnInit {

  @Input('parentForm')
  public parentForm: FormGroup;

  constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) { }

  ngOnInit() {
    this.parentForm.addControl('newControl', <Some Control>);
  }
}

接下来我有一个这样的准系统单元测试文件

describe('ChildComponent', () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule, FormsModule],
      declarations: [ ChildComponent ],
      providers: [ FormBuilder, FormGroup ]
    })
    .compileComponents();
  }));

  beforeEach(inject([FormBuilder], (fb: FormBuilder) => {
    fixture = TestBed.createComponent(ChildComponent);
    component = fixture.componentInstance;
    component.parentForm = fb.group({});
    component.ngOnInit();
    fixture.detectChanges();
  }));

  fit('should be created', () => {
    expect(component).toBeTruthy(); …

我有一个表单来更新角度4中现有模型类的字段的一部分.

我需要在当前模型实例上设置setValue,最后将值重新更新.

问题是我只需要更新模型的某些部分,但角形式会返回错误

"Cannot find form control with name 'fieldname'" 

对于我不想编辑的额外字段.

获得所需行为的最佳选择是什么？

我想为我不希望在表单中更新的字段添加隐藏的formControls,但是我们的一些模型非常大,而我们需要用户只编辑它们的一部分.

我必须在最后获得一个更新的模型,用于我们的模型的脏检查和一般更新(与具有多个重复的类相关代码相比,仅用于设置所有formControls的值并从提交时的formControls更新模型)

谢谢.

更新只是为了澄清 - 我想要一个类似于此的行为:

--component.ts
model: Model = someModelWithData;

--component.html
<input type="checkbox" [(NgModel)]="model.FieldOne" />

用户更改FieldOne中的值后,模型仍然已满,但所有其他数据都已更改,但FieldOne已更改.

我在登录页面使用了模板驱动的表单.我想在输入元素上有一个红色边框,如果它们无效或有任何错误,borderRed但当输入为空或无效时,该类没有添加到输入元素上.

<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="m-login__form m-form" action="">
  <ng-template #alertSignin></ng-template>

  <div class="form-group form-md-line-input form-md-floating-label">
    <label>
      Email <span class="text-danger">*</span>
    </label>
    <input [class.borderRed]="email.invalid" class="form-control m-input" type="text" required="required" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
  </div>

  <div class="form-group form-md-line-input form-md-floating-label">
    <label [pTooltip]="attachementTooltipmsg" tooltipPosition="top" for="form_control_1">
      Password <span class="text-danger">*</span>
    </label>
    <input [class.borderRed]="password.invalid" class="form-control m-input" required="" name="password" type="password" [(ngModel)]="model.password" #password="ngModel">
  </div>

  <div class="m-login__form-action">
    <button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" id="m_login_signin_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
      Sign In
    </button>
  </div>
</form>

我有一个角度4表单,我试图提交数据

HTML代码

<form class="form-horizontal"   [formGroup]="signupForm" 
(ngSubmit)="onFormSubmit()" >
<fieldset>
  <legend>Scheduler</legend>
    <!--- Gender Block -->
    <div class="form-group">
    <label for="scheduleJob">Schedule Job</label>
    <input type="text" formControlName = "schedulejob"
      id="scheduleJob"
      placeholder="Schedule Job">

按钮代码

 <div class="form-group">
        <button type="reset" class="btn btn-default">Cancel</button>           
        <button type="submit"  class="btn btn-primary">Submit</button>          

    </div>

Scheduler.TS文件

import { Component, OnInit } from '@angular/core';
import { Scheduler } from 'rxjs/Scheduler';
/* Import FormControl first */
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-scheduler',
  templateUrl: './scheduler.component.html',
  styleUrls: ['./scheduler.component.css']
})
export class SchedulerComponent implements OnInit {

  //Gender …

我有一个角度项目，其中使用 PrimeNG 复选框组件，但当我尝试将复选框的默认值设置为选中时出现问题。我什至尝试过绑定[checked]属性，但我猜 p-checkbox 不知道它。

HTML 文件

<p-checkbox name="checkboxName" [(ngModel)]="checked" 
binary="true" label="Perform Notifications"></p-checkbox>

{{checked}}

组件文件

export class XYZ{
checked: boolean = true;
}

加载后，我可以在 HTML 页面中看到下面选中的变量的值为“true”，但复选框为空或未选中。