标签: angular-forms

使用 Angular 4，我有一个带有复选框的反应式表单。必须至少选中其中一个复选框才能提交表单。

我创建了一个自定义验证，它似乎返回正确的值，但表单始终无效。但是，当我检查表单控件是否有错误时，我得到错误。

---- 笨蛋 ----

这是具有相同行为的示例代码：

@Component({
  selector: 'my-app',
  providers: [FormBuilder],
  template: `
    <div> 
      Checkbox values: {{alertForm.value | json}}
      <mark> Is Form Valid: {{alertForm.valid}} </mark> <-- WHY IS FORM VALID ALWAYS FALSE?
      Does Fields have error: {{alertForm.get('fields').hasError('checkboxSelected')}}
    </div>

    <form [formGroup]="alertForm">
      <fieldset class="form-group" formGroupName="fields">
        <legend class="col-md-4"> Fields</legend>
        <div class="col-md-8 checkbox column-2">
            <label *ngFor="let type of types.controls; let i=index"> 
              <input name="fieldsAdd" type="checkbox" [formControl]="type" />
                {{fields[i].name}}
            </label>
        </div>
    </fieldset>
    </form> 

  `
})
export class App implements OnInit {
  alertForm: FormGroup;
  fields …

我有使用反应式的简单形式，我可以选择使用模板驱动形式的选项，但我不能使用反应式形式做同样的事情。这里做错了什么

<form [formGroup]="reactiveform">
<mat-form-field>
  <mat-select placeholder="Gender" [(value)]="gendervalue" formControlName="gender">
    <mat-option value="female">Female</mat-option>
    <mat-option value="male">Male</mat-option>
  </mat-select>
</mat-form-field>
</form>

<p>Form value: {{ reactiveform.value | json }}</p>

直播链接。

这是我的主要代码：

get emailFormArray() {
  return this.formGroup.get("emails") as FormArray;
}

public ngOnInit() {
  this.formGroup = this.formBuilder.group({
    emails: this.formBuilder.array([]),
  });
  this.addEmailFormGroup();
}

public addEmailFormGroup() {
  this.emailFormArray.controls.push(
    this.formBuilder.group({
      email: ['', Validators.email],
    }),
  );
}

在我的模板中

{{ formGroup.valid }}
{{ emailFormArray.valid }}
<ng-container *ngFor="let email of emailFormArray.controls">
  {{ email.valid }}
  {{ email.get('email').valid }}
</ng-container>

当我输入一个无效的电子邮件时，模板中的结果是true true false false，为什么formGroup和emailFormArray是有效的？谢谢！

我有一组语言供用户选择，还有一种默认语言可供选择。选择默认语言后，我想确保以编程方式选中该语言的复选框。

我不确定如何在语言的 FormArray 上使用 patchValue。

组件.ts

import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
...

constructor(...) {
    this.languages = ['English', 'Spanish', 'Mandarin', 'Klingon'];

    this.myForm = new FormGroup({
        languages: this.createLanguagesControl(),
        defaultLanguage: new FormControl('', Validators.required)
    });
}

createLanguagesControl() {
    const controls = this.languages.map(language => {
        return new FormControl(false);
    });
    return new FormArray(controls);
}

defaultLanguageSelection() {
    let formValues = this.myForm.value;
    console.log('defaultLanguageSelection', formValues.defaultLanguage);

    let i = 0;
    for (let language of this.languages) {
        if (language == formValues.defaultLanguage) {              // find the index of …

为什么 CKEditor 4 Angular 模块表单字段验证不起作用？

我的住在这里。

我尝试了 .touched、.pristine、.valid 的不同组合。

但是，该字段不像另一个字段那样工作。

这意味着当我点击“保存”按钮时，在非触摸状态下，

将显示其他字段错误消息，但是 CKEditor 不会。

您可以通过代码示例在这里找到我的问题 https://stackblitz.com/edit/angular-vhrppl?embed=1&file=src/app/app.component.html

我想在 patchValue 时阻止 valuechange 订阅，因为这两个值都订阅了 valuechange 并覆盖了计算结果。

我相信这应该是应用程序中的常见用例，是否有 RxJS 运算符来处理这种情况或有更好的设计？

在我的 Angular 应用程序中：我想从这种工作良好的表单切换：

<form autocomplete="off" #searchActor="ngForm"
    (ngSubmit)= submitForm(searchActor.value)
    class="ml-2 mr-2 my-auto">
    <input type="text" name="actorSearch"
        (ngModel)="model.searchActor">
 </form>

对于这种有棱角的材料：

    <mat-form-field #searchActor="ngForm"
                        (ngSubmit)= submitForm(searchActor.value)
                        class="ml-2 mr-2 my-auto">
          <mat-label>Custom Search</mat-label>
            
          <input matInput type="text"
                          name="actorSearch"
                          placeholder="Ex. young, cartoon..." 
                          (ngModel)="model.searchActor">
          <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
            <mat-icon>close</mat-icon>
          </button>
   </mat-form-field>

这是我的进口：

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSelectModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
  ],  

但是每当我加载我的应用程序时，我都会收到此错误：

知道我该如何解决这个问题吗？

我尝试以下方法

    new FormControl<boolean | undefined>({ value: true }, Validators.required),

overloads并得到 no for存在的错误boolean。使用

    new FormControl<string | null>({ value: null, disabled: false }));

有效 ==> 那么，Angular 14 中 Typed FormControls 的正确语法是什么boolean？

我刚接触角度，因此单击时有一个编辑按钮，我需要显示两个按钮，即保存和取消按钮以及隐藏编辑按钮。在单击取消时，我只需要显示编辑按钮。我被困在通过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。

我在使用angular with 和attributes 创建label和input元素之间的链接时遇到问题.给出以下代码:forid

@Component({
  selector: 'hello',
  template: `
<label [attr.for]="identifier">{{label}}</label>
<input [(ngModel)]="model" [attr.id]="identifier">
  `,
})
export class HelloComponent  {
  @Input() identifier: string;
}

我想要的是能够通过单击标签来聚焦输入字段,这是web中的默认行为.如果我静态设置属性,则此行为有效.或者,如果我从开发人员工具手动更新DOM中的属性.

我试过的,对于id和for:

id="{{identifier}}"
[id]="identifier"
[attr.id]="identifier"

UPDATE

发现了问题.检查下面的答案.