嗨我正在使用表单生成器在角度2中实现一个表单

在component.ts中,我使用formGroup实现了我的表单

以下是我的代码

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      zip: ['', [<any>Validators.required , …

有没有办法手动将formGroup设置为无效状态？

我myForm.invalid = true;也试过了myForm.status = 'INVALID'

但是invalid,status是const.

我不想将特定控件标记为无效.但整个形式.

我正在向父组件表单添加子组件.

Pessoa.html

<form [formGroup]="usuarioForm" novalidate>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleInputNome">Nome</label>
                        <input type="text"
                               formControlName="nome"
                               class="form-control "
                               placeholder="Nome" />
                    </div>
                </div>

            <endereco [enderecoGroup]=usuarioForm></endereco>

            <button type="submit"
                    class="btn btn-default"
                    (click)="InsereUsuario(usuarioForm.value)">
                Enviar
            </button>
</form>

Endereco.html

            <h4>Endereço</h4>
            <div class="col-md-2">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputCep">Cep</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Cep"
                           (blur)="GetAdress($event.target.value)">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group" [formGroup]="enderecoGroup">
                    <label for="exampleInputComplemento">Complemento</label>
                    <input type="text"
                           class="form-control"
                           placeholder="Complemento"
                           [value]=endereco?.complemento>
                </div>
            </div>

Endereco.ts

@Input() enderecoGroup: FormGroup;

endereco: Endereco

GetEndereco(Cep: string) {
    this.servico.GetEndereco(Cep)
        .subscribe(resposta => this.endereco = resposta);
}

提交表单时,Adress.html条目为空白,我该怎么办？

我正在使用React表单

Stackblitz

我想要pipe一个反应形式的表格组。

然后我想对这组单独的控件进行一些检查。

这是我定义表单的方式

  myForm = this.formBuilder.group({
    myFormNameDrop: this.formBuilder.group({
      myName:['',Validators.required],
      myDrop:['era']
    }),    
    style:[''],
    userId:[this.user_id]
  });

这就是pipe我试图创造的

this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(      
  debounceTime(400),
  distinctUntilChanged(),            
  filter(formdata => formdata.myName.length > 0),
  switchMap( formdata => this.shoesService.details(formdata.myName)),
  shareReplay(1)
);//pipe  

我有两个错误。 TypeError: Cannot read property 'pipe' of undefined有关this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(

并且 VS 代码显示有关以下内容的警告filter(formdata => formdata.myName.length > 0),：myName类型上不存在属性'{}'

在这种情况下，我如何访问 formGroups 和 formGroups 的控件？我使用角度 6

谢谢

对于我正在构建的应用程序，我从 API 检索数据并直接使用该响应设置我的表单值。为此，我正在使用反应式表单模块。我已经构建了表单，使其与我从 API 获取的对象相匹配。问题是某些字段应该是一个对象 (FormGroup)，但在为空时为 NULL。这会导致错误“无法将 undefined 或 null 转换为对象”。

表单组实例：

note: this.formBuilder.group({
   turnbook_file: [''],
   note: [''],
   additional_files: ['']
});

来自 API 的响应

note: NULL

我的想法是，也许可以在定义 FormGroup 的地方放置 OR 语句或其他内容，如下所示：

note: this.formBuilder.group({
   turnbook_file: [''],
   note: [''],
   additional_files: ['']
} | NULL);

I'm working in forms and I have two components: my child component contains this formGroup Object :

employeeForm : FormGroup;
this.employeeForm = new FormGroup({
       firstName:new FormControl(),
       lastNAme:new FormControl(),
       email:new FormControl()
    });

the child Component conatins just a small part of the form and the parent componant, contains the global form with submit button..

my issue is: I want in the Parent Component when I click on submit button I get the form group from my child component and push it …

我看到角度形式有以下方法registerControl()，但我无法真正理解它的用法。
有人有一个很好的解释和用例吗？

我感觉我错过了一些可能有用的东西。

谢谢你的帮助。

编辑

我已经阅读了角度解释但无法理解

输入位于模态对话框内.我不知道它为什么不起作用.我查看了官方文档,它列出了焦点,你可以传递给元素,但它不起作用？

有谁知道为什么？

角度材料 - 输入文档

<form class="example-form">

  <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
    <input mdInput type="email" name="to" placeholder="Email">
    <md-error></md-error>
  </md-input-container>

  <md-input-container focus focused>
    <input mdInput type="text" name="a" placeholder="zzzz" focus focused (focus)="">
  </md-input-container>

</form>

在Angular 4应用程序中使用ngx-bootstrap Datepicker,

我知道通常你可以这样指定日期格式:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">

但是这次我在一个模板驱动的Angular形式里面,所以我的输入没有绑定到myModel上面例子中的变量,但它只是绑定到表单:

<input id="from" name="from"
       bsDatepicker ngModel>

那么在这种情况下如何指定日期格式？

编辑:看起来实现这一点的方法是newVar在组件内创建一个新变量,然后将其绑定到[(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">

不过我想知道是否有更好的解决方案.

代码如下

<input type="number" class="form-control" value="" name="cost_price" #name="ngModel" [(ngModel)]="item.cost_price" placeholder="Cost Price"  />

用户不应该输入更多2位小数.

例如,如果用户想要输入21.256.他应该只被允许进入21.25

如何使用角度5来实现这一点？