标签: angular-forms

当我的 html 在 Angular 2 中渲染时，如果所有表单控件出错，如何将它们设置为错误状态？为了澄清这一点，示例代码中只有一个下拉菜单。当表单加载时，它是非红色/没有必需的消息。如果我打开下拉菜单，然后单击外部某处而不进行任何选择，那么红色魔法就会发生，我会看到错误消息。当表单第一次呈现时，我需要它处于错误状态/红色并带有错误消息。我想我需要在某个地方设置该控件的错误状态。只是不知道在哪里以及如何。请指教。代码如下 https://stackblitz.com/edit/angular-error-initial

当尝试使用 HTML 文件更新网格表时，我收到此错误消息。

在这里，我使用了静态数据来显示表格，并从显示 primeng 表的其他组件导入，并且我添加了一个更新按钮，该按钮具有重定向到另一个页面以更新数据的功能。

该问题出现在 HTML 文件的第一行中，即；[formGroup]="我的车辆"

我尝试使用不同的表单组名称进行检查，但问题仍然相同。

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-crud',
  templateUrl: './crud.component.html',
})
export class CrudComponent implements OnInit {
  myvehicle: FormGroup;
  display: boolean;
  id: number;
  vin: any;
  year: number;
  brand: string;
  color: string;
  vehicle: any;
  Data: any;

  constructor(private activatedRoute: ActivatedRoute, private fb: FormBuilder) {
   }

  ngOnInit() {
    this.myvehicle = this.fb.group({
    vin: [''],
    year: [''],
    brand: [''],
    color: …

我有 2 个文本区域，如果用户输入或插入值，还需要更新其他文本区域字段。

我可以使用change该函数来做到这一点，但我尝试使用带有控件名称的 ng-model 。出现错误。如何解决这个问题？或者我们不能使用 ngmodel 来收集控件名称吗？

这是我的文本区域：

<textarea name="control-name" [(ngModel)]="control_name_text" formControlName="ControlName"  [ngModelOptions]="{standalone: true}" cols="85" rows="5" placeholder="Enter Control Name"></textarea>

另一个：

<textarea name="pageUrl" [value]="control_name_text"  cols="85" rows="5" placeholder=""></textarea>

control_name_text我也在 ts 文件中声明了- 。得到错误为：

Can't bind to 'ngModelOptions' since it isn't a known property of 'textarea'.

有什么帮助吗？提前致谢。

我在父组件中有一个表单，它将数据作为输入属性传输到子组件，而子组件有一个表单，可以读取此数据并使用此数据预填充其表单，作为编辑用户配置文件的方式。在我尝试使用传输的数据设置输入字段的行中，chrome 返回一个控制台错误，指出它无法读取未定义的 setValue 属性。代码可能有什么问题？

这是该代码：

this.eForm.setValue({
        firstname: this.employee.user.firstname,
        lastname: this.employee.user.lastname,
        email: this.employee.user.email
      });

子组件：

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { NgForm, ControlContainer } from '@angular/forms';

@Component({
  selector: 'app-manager-view-employee-profile',
  templateUrl: './manager-view-employee-profile.component.html',
  styleUrls: ['./manager-view-employee-profile.component.css'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class ManagerViewEmployeeProfileComponent implements OnInit {
  @ViewChild('f', {static: false}) eForm: NgForm;

  @Input() employee: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {

    console.log(this.eForm);
    console.log(this.employee.user.firstname);
this.eForm.setValue({
    firstname: this.employee.user.firstname,
    lastname: …

我有一个带有我自己的自定义控件组件的表单：

@Component({
  selector: "my-app",
  template: `
    <form [formGroup]="form">
      <app-custom-control formControlName="customControl"></app-custom-control>
    </form>

    <button (click)="touch()">
      Touch!
    </button>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      customControl: "1"
    });
  }

  touch() {
    this.form.markAllAsTouched();
  }
}

我的自定义控制组件内部又包含另一个自定义控制组件（在我的真实应用程序中需要它，因为外部控制组件有两种模式 - 读取和编辑）：

@Component({
  selector: "app-custom-control",
  template: `
    <ng-select [ngModel]="value" [items]="items"></ng-select>
  `,
  styleUrls: ["./custom-control.component.css"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomControlComponent,
      multi: true
    }
  ]
})
export class CustomControlComponent implements ControlValueAccessor, OnInit {
  items = ["1", "2"]; …

我需要将表单从父组件注入到子组件中，以便能够验证子组件输入，如下所示：

    <form #formReference="ngForm">
     <child-component></child-component>
     <child-component></child-component>
     <child-component></child-component>

     <p>{{formReference.form.valid}}</p>
    </form>

现在我已经在子组件上添加了这个提供程序，使其使用父表单并且工作正常

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
}) 

但是，我仍然需要能够像以前一样在没有表单的情况下使用子组件。有没有办法让这个提供者可选？目前，如果在没有表单包装的情况下使用我的子组件，我会收到错误

ERROR NullInjectorError: R3InjectorError(CustomModule)[NgForm -> NgForm -> NgForm -> NgForm -> NgForm]
  

谢谢你的时间！

我试图在我的项目中使用单选按钮，但我未能以编程方式检查第一个单选按钮。

我已经尝试过该解决方案，但它仍然无法在我的代码中工作。

这是我的单选按钮：

<div class="col-sm-3 col-form-label" style="padding-right: 0px;">
    <input type="radio" value=1 [checked]="actionUpload == 1" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(1)"> Radio 1
    <input type="radio" value=2 [checked]="actionUpload == 2" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(2)"> Radio 2
</div>

下面是我的打字稿：

<div class="col-sm-3 col-form-label" style="padding-right: 0px;">
    <input type="radio" value=1 [checked]="actionUpload == 1" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(1)"> Radio 1
    <input type="radio" value=2 [checked]="actionUpload == 2" name="uploadAction" [(ngModel)]="actionUpload" (ngModelChange)="choose(2)"> Radio 2
</div>

这是我得到的结果，无线电 1 从未被检查过。

我错过了什么吗？

我很乐意提供任何帮助。

使用 Angular 中新的类型化表单控件，我们可以做到这一点：

interface MyFormGroup {
    id: FormControl<number | null>;
    name: FormControl<string | null>;
    email: FormControl<string | null>;
}

FormControl它为下面的每个定义了一个类型FormGroup：

myFormGroup = new FormGroup<MyFormGroup>({
    id: new FormControl(42),
    name: new FormControl('Arthur'),
    email: new FormControl('arthur@dent.com')
});

该值的类型FormGroup为：

Partial<{
    id: number | null;
    name: string | null;
    email: string | null;
}>

如果我想FormGroup在函数中使用 the 的值，是否有获取该值类型的快捷方式，或者必须单独定义它，例如

interface MyFormGroupValue {
    id: number | null;
    name: string | null;
    email: string | null;
}

myFunction(myFormGroupValue: MyFormGroupValue){
    console.log(myFormGroupValue);
}

换句话说，是否可以 …

在Angular 4+中,我遵循模板驱动的形式:

<form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" >
  <div class="form-group">
    <label for="item_name">Item Name</label>
    <input id="item_name" name="item_name" [(ngModel)]="itemName" 
          #item_name="ngModel" autofocus class="form-control"
          required minlength="4" maxlength="20" 
          aria-describedby="itemNameHelpBlock">
    <small *ngIf="(item_name.invalid && item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" >
      Value must be at least 4 characters and must not exceed 20 characters
    </small>
  </div>
  <div class="form-group">
    <label for="item_type">Item Type</label>
    <input id="item_type" name="item_type" [(ngModel)]="itemType" 
         #item_type="ngModel" class="form-control" required minlength="2"
          maxlength="20" aria-describedby="itemTypeHelpBlock">
    <small *ngIf="(item_type.invalid && item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" >
      Value must be at least 2 characters and must not exceed …

我正在尝试构建跨越多个组件的Reactive-Form,就像这样

<form [formGroup]="myForm" (ngSubmit)="onSubmitted()">
   <app-names></app-names>
   <app-address></app-address>
   <app-phones></app-phones>
   <button type="submit">Submit</button>
</form>

当我尝试提交时,我得到空对象.

Stackblitz在这里