标签: angular-reactive-forms

在ts is_edit = true中禁用...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

我只是想根据true或禁用输入false.

我试过以下:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

FormGroup:

FormGroup将每个子FormControl的值聚合到一个对象中,每个控件名称作为键.

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew'),
});

Run Code Online (Sandbox Code Playgroud)

FormArray:

FormArray将每个子FormControl的值聚合到一个数组中.

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew'),
]);

Run Code Online (Sandbox Code Playgroud)

应该何时使用另一个？

我们有一个具有动态构建形式的组件.使用验证器添加控件的代码可能如下所示

var c = new FormControl('', Validators.required);

但是,让我们说我想稍后添加第二个Validator .我们怎样才能做到这一点？我们无法在线找到任何相关文档.我确实发现虽然在表单控件中有setValidators

this.form.controls["firstName"].setValidators 

但目前尚不清楚如何添加新的或自定义验证器.

谢谢一堆.

我在Angular中有一个反应形式,如下所示:

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

this.AddCustomerForm.valid返回false,但一切看起来都不错.

我试图通过检查控件集合中的status属性来查找.但我想知道是否有办法找到无效的并显示给用户？

this.formGroup = this.formBuilder.group({
    images: this.fb.array([])
});

我以这种方式添加新元素: this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

get images(): FormArray {
    return <FormArray>this.formGroup.controls.images;
}

我的课程:

export class ImageCreateForm {
    id: number;
    constructor(id: number) {
        this.id = id;
    }
}

export class ImageResponse {
    id: number;
    url: string;
}

当我添加图像时,我的{{ formGroup.value | json }}是:

"images": [
   {
    "id": 501
   },
   {
    "id": 502
   },
   {
    "id": 503
   }
]

我想在发送表单POST请求之前删除之前的图像(例如只有图像id=502)formGroup.可能吗？我试过使用reset方法,但这删除所有元素: this.images.reset({"id":image.id});.image它在哪里是一个ImageResponse对象.

结果:{"images": [ null, …

我在我的页面上有一个表单,当我调用FormGroup.reset()它时将表单类设置为ng-pristine ng-untouched但FormControl.hasError(...)仍然返回truthy.我在这做错了什么？

模板

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)">
  <mat-form-field>
    <input matInput formControlName="email" />
    <mat-error *ngIf="email.hasError('required')">
      Email is a required feild
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" formControlName="password" />
    <mat-error *ngIf="password.hasError('required')">
      Password is a required feild
    </mat-error>
  </mat-form-field>
  <button type="submit">Login</button>
</form>

零件

export class MyComponent {
  private myForm: FormGroup;
  private email: FormControl = new FormContorl('', Validators.required);
  private password: FormControl = new FormControl('', Validators.required);

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.myForm = formBuilder.group({
      email: this.email,
      password: this.password
    }); …

为什么我会收到此错误？

以下代码在另一个应用程序中有效

          <input class="form-control form-control-sm" type="number" min="0"
            [formControl]='invoiceForm.get("quantity")'>

在这个新应用程序中它也可以工作，但仍然在终端中抱怨

  Type 'AbstractControl' is not assignable to type 'FormControl'.

我想要一个按钮被禁用,直到使用FormBuilder for Angular检查复选框.我不想明确检查复选框的值,而是希望使用验证器,以便我可以简单地检查form.valid.

在下面的两个验证案例中,复选框都是

interface ValidationResult {
  [key:string]:boolean;
}

export class CheckboxValidator {
  static checked(control:Control) {
    return { "checked": control.value };
  }
}

@Component({
  selector: 'my-form',
  directives: [FORM_DIRECTIVES],
  template: `  <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="checkbox" id="cb" ngControl="cb">
    <button type="submit" [disabled]="!form.valid">
    </form>`
})

export class SomeForm {
  regForm: ControlGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      cb: [ CheckboxValidator.checked ]
      //cb: [ false, Validators.required ] <-- I have also tried this
    });
  }

  onSubmit(value: any) {
    console.log('Submitted: ', this.form);
  } …

我正在使用Reactive Forms在Angular2中构建一个表单.我正在使用FormBuilder来创建一组字段.对于文本框,这非常有效.但我找不到单选按钮的formControl.

这是如何运作的？我应该<input formControlName="gender" type="radio">像文字输入那样做吗？

我最近将角度版本升级到6-rc.我得到了以下警告

看起来您在与formControlName相同的表单字段上使用ngModel.Angular v6中不推荐支持将ngModel输入属性和ngModelChange事件与反应式表单指令一起使用,并将在Angular v7中删除

有关此问题的更多信息,请参阅我们的API文档:https: //angular.io/api/forms/FormControlName#use-with-ngmodel

它到底是什么意思？该链接没有任何片段#use-with-ngmodel

我想我需要删除ngModel并使用formGroup作为我的数据绑定对象.