anguar12里面FormControl学习

在Angular 12中，要动态修改FormGroup，你可以使用patchValue()方法或setValue()方法。

1. 使用patchValue()方法：

   import { Component, OnInit } from '@angular/core';
   import { FormBuilder, FormGroup } from '@angular/forms';
   
   @Component({
     selector: 'app-example',
     templateUrl: './example.component.html',
     styleUrls: ['./example.component.css']
   })
   export class ExampleComponent implements OnInit {
     formGroup: FormGroup;
   
     constructor(private formBuilder: FormBuilder) { }
   
     ngOnInit() {
       this.formGroup = this.formBuilder.group({
         firstName: '',
         lastName: ''
       });
     }
   
     updateForm() {
       this.formGroup.patchValue({
         firstName: 'John',
         lastName: 'Doe'
       });
     }
   }
   

   在上面的例子中，我们在ngOnInit()方法中创建了一个FormGroup对象，并将其赋值给formGroup属性。然后，在updateForm()方法中，我们使用patchValue()方法来动态修改FormGroup的值。

2. 使用setValue()方法：

   import { Component, OnInit } from '@angular/core';
   import { FormBuilder, FormGroup } from '@angular/forms';
   
   @Component({
     selector: 'app-example',
     templateUrl: './example.component.html',
     styleUrls: ['./example.component.css']
   })
   export class ExampleComponent implements OnInit {
     formGroup: FormGroup;
   
     constructor(private formBuilder: FormBuilder) { }
   
     ngOnInit() {
       this.formGroup = this.formBuilder.group({
         firstName: '',
         lastName: ''
       });
     }
   
     updateForm() {
       this.formGroup.setValue({
         firstName: 'John',
         lastName: 'Doe'
       });
     }
   }
   

   在上面的例子中，我们使用setValue()方法来动态修改FormGroup的值。与patchValue()方法不同的是，setValue()方法要求你提供所有表单控件的值，而不仅仅是要修改的控件。

无论是使用patchValue()方法还是setValue()方法，你都可以根据需要动态修改FormGroup的值。

在Angular 12中，可以通过以下步骤动态修改FormGroup并给它添加属性：

1. 导入所需的模块和类：

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

1. 在组件类中定义一个FormGroup对象：

myForm: FormGroup;

1. 在组件的ngOnInit生命周期钩子中初始化FormGroup：

ngOnInit() {
  this.myForm = new FormGroup({
    // 在这里定义初始的表单控件和属性
    // 例如：
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
  });
}

1. 在需要动态修改FormGroup的地方，使用addControl方法添加新的控件和属性：

this.myForm.addControl('newControl', new FormControl('', [Validators.required]));

1. 如果需要移除控件和属性，可以使用removeControl方法：

this.myForm.removeControl('newControl');

1. 在模板中使用formGroup指令来绑定FormGroup对象：

<form [formGroup]="myForm">
  <!-- 在这里添加表单控件的HTML代码 -->
</form>

通过以上步骤，你就可以在Angular 12中动态修改FormGroup并给它添加属性。请注意，如果你在模板中使用了动态添加的控件，记得在提交表单之前进行验证。

可以使用addControl方法来动态添加属性aa，并设置初始值为false。

示例代码如下：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      // 初始时没有属性aa
    });

    // 动态添加属性aa，并设置初始值为false
    this.myForm.addControl('aa', this.formBuilder.control(false));
  }
}

在模板中使用FormGroup对象时，可以通过formControlName指令来绑定属性aa的值。

示例模板代码如下：

<form [formGroup]="myForm">
  <input type="checkbox" formControlName="aa">
</form>

这样就可以通过FormGroup对象动态添加属性aa，并将其初始值设置为false。

是的，通过调用FormGroup对象的addControl方法，可以动态地向FormGroup对象中添加属性。具体的用法如下：

const formGroup = this.formBuilder.group({
  // 初始属性
  name: '',
  age: ''
});

// 动态添加属性
formGroup.addControl('address', new FormControl(''));