Guest User

Untitled

a guest
Apr 26th, 2018
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.21 KB | None | 0 0
  1. <form [formGroup]="form">
  2. <input type="text" id="name" formControlName="name" />
  3. <input type="text" id="age" formControlName="age" />
  4. </form>
  5.  
  6. ngOnInit() {
  7.  
  8. this._route.queryParams.subscribe(params => {
  9. getUser(params.userId).subscribe(user => {
  10. this._buildForm(user);
  11. })
  12. });
  13. }
  14.  
  15. private _buildForm(user){
  16. this.form = _fb.group({
  17. name: [{value: user.name, disabled: user.someCondition}, Validators.required],
  18. age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
  19. })
  20. }
  21.  
  22. this.form.disable() //Doesn't do anything
  23.  
  24. this.form.controls.name.disable(); //Doesn't help
  25.  
  26. <button (click)="form.disable()" value="Disable Form" />
  27. <button (click)="form.enable()" value="Enable Form" />
  28.  
  29. this._router.navigate([], {
  30. relativeTo: this._route,
  31. queryParams: {userId: 10}
  32. })
  33.  
  34. @Component({
  35. selector: 'my-app',
  36. templateUrl: './app.component.html',
  37. styleUrls: [ './app.component.css' ]
  38. })
  39. export class AppComponent {
  40. group;
  41. isDisabled = true;
  42.  
  43. constructor(fb: FormBuilder) {
  44. this.group = fb.group({
  45. stuff: fb.control({value: 'stuff', disabled: this.isDisabled})
  46. });
  47. }
  48.  
  49. toggle() {
  50. this.isDisabled = !this.isDisabled;
  51.  
  52. this.group.controls.stuff[this.isDisabled ? 'enable' : 'disable']();
  53. }
  54. }
  55.  
  56. <form [formGroup]="form" (submit)="_updateForm()">
  57. <input type="text" id="name" fromControlName="name" />
  58. <input type="text" id="age" fromControlName="age" />
  59. </form>
  60.  
  61. private userId: any;
  62.  
  63.  
  64. ngOnInit() {
  65. this._route.queryParams.subscribe(params => {
  66. this.userId = params.userId;
  67. this._updateForm();
  68. });
  69. }
  70.  
  71. private _buildForm(user){
  72. this.form = _fb.group({
  73. name: [{value: user.name, disabled: user.someCondition}, Validators.required],
  74. age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
  75. });
  76. }
  77.  
  78. // The update function has to be public to be called inside your template
  79. public _updateForm(){
  80. getUser(this.userId).subscribe(user => {
  81. this._buildForm(user);
  82. });
  83. }
  84.  
  85. <form [formGroup]="form">
  86. <input type="text" id="name" fromControlName="name" />
  87. <input type="text" id="age" fromControlName="age" />
  88. </form>
Add Comment
Please, Sign In to add comment