angular-web-assets v3.1.38

Angular Web Assets

Tools to help you work with Angular.

Resources

For using Angular Components as Reactive Form Controls check these resources: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html https://medium.com/@tarik.nzl/angular-2-custom-form-control-with-validation-json-input-2b4cf9bc2d73

For splitting Reactive Forms into chunks here is a very good resource.

@Component({
  // Ensure we either have a [formGroup] or [formGroupName] with our tag
  selector: '[formGroup] some-selector,[formGroupName] some-selector',
  templateUrl: './some-template.component.html'
})
export class SomeComponent implements OnInit {
  protected formGroup: FormGroup;
  @Input() formErrors: any;

  // Let Angular inject the control container
  constructor(private controlContainer: ControlContainer) {
  }

  ngOnInit() {
    // Set our formGroup property to the parent control
    // (i.e. FormGroup) that was passed to us, so that our
    // view can data bind to it
    this.formGroup = <FormGroup>this.controlContainer.control;
  }
}

...later in the parent component use

<ow-some-selector formGroupName="someGroupName"
                  [formErrors]="formErrors"></ow-some-selector>

This is only a snippet. Maybe not complete. Please check the original resource.

Compiling assets with gulp

To compile any less, scss file or to run specific tasks it is enough to run gulp default.

In case you need to compile specific assets, search for the dedicated gulp command.

Compiling *.ts files

For compiling typescript files it is enough to run tsc or npm run tsc.

All available commands:

• npm run tsc.
• npm run gulp.
• npm run build.

The last command npm run build will run both tsc and gulp.

Reactive Forms

Standard implementation for reactive forms.

...

@Component()
export class AnyFormComponent extends ReactiveFormClass implements OnInit {
  @ViewChild(PanelComponent)
  protected panel: PanelComponent;

  constructor(protected fb: FormBuilder,
              protected route: ActivatedRoute,
              protected rbs: ReactiveBridgeService,
              protected crud: AnyService) {
    super();
  }

  protected formErrors = {
    name: []
  };

  protected errorMessages = {
    name: {
      required: 'Name is required'
    }
  };

  ngOnInit() {
    this.init(PortfolioFormModel);
  }

  onSubmit() {
    this.loading = true;
    this.crud.post(this.formGroup.value).subscribe(
      (res: HttpDataOK) => {
        this.completed(res);
      },
      (err: ErrorObservable) => {
        this.handleServerSideErrors(err);
      }
    );
  }
}

<ow-panel (toggle)="toggleMinimizedState()"
          [position]="'left'"
          [outlet]="'form-master'"
          [title]="'Any Form'"></ow-panel>
<div class="panel-body left" [ngStyle]="getNgStyleObj()">
  <ow-form-loading [visible]="loading"></ow-form-loading>
  <ow-form-error [err]="err" [visible]="error"></ow-form-error>
  <ow-form-success [allowReset]="create" [visible]="success"
                   (reset)="reset()" (close)="close()"></ow-form-success>
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" *ngIf="!loading && !success" novalidate>
    <div>
      <label>
        Any
        <input formControlName="name">
      </label>
      <ow-validation-errors [errors]="formErrors['name']"></ow-validation-errors>
    </div>
    <div>
      <button [disabled]="formGroup.pristine">Save</button>
    </div>
  </form>
</div>